Software Developer

Toggle Show/Hide with jQuery

This is for when you need to toggle showing and hiding more than one element on a page. For example, a page full of headings in which you click a heading to show a list underneath it, then click again to hide the list. This uses jQuery. (See this instead for a pure JavaScript example.)

This uses the jQuery slideToggle() method, so it has a nice slide up and down animation which the pure JavaScript example (link above) does not have.

Here is a working example of toggle with jQuery. In this example, the h2 headings have the class "clickable-heading".

 

By

Questions and Comments are Welcome

Your email address will not be published. All comments will be moderated.

Please wrap code in "code" bracket tags like this:

[code]

YOUR CODE HERE 

[/code]