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".