Toggle div using jQuery

19.Aug.2010

Very often you want to supply user with some information, but you don’t want to be too pushy. Present user with a link, and let him click on it so it will lead him to extended text. To do that, all you have to do is write a little bit of HTML and jQuery. To achieve this effect, you can use following snippet:

1
2
3
4
5
6
7
8
9
10
11
<p>Click on the link to see how to use <a href="javascript:void(0);" id="how-to">toggle in jQuery</a>?</p>
 
<div style="display: none;" id="toggle-div">
You should not write inline style, but I used it to make example of using slide toggle with jQuery shorter.
</div>
 
<script>
jQuery("#how-to").click(function () {
	jQuery("#toggle-div").slideToggle("slow");
});
</script>

Example: Slide toggle div using jQuery

Click on the link to see how to use toggle in jQuery?