Let’s say you have website, and on this site you have a list of elements you would like to hide initially, and then when you click on the header of this list, these elements fade in. Well, this code does just that! [ CLICK HERE FOR A DEMO ]

First, the HTML. The title, “Computers”, will be the only thing that displays when the page initially loads. And the child elements – Laptops, Desktops, Servers – will all be hidden. Now, when you click on “Computers”, the child elements will all appear on the screen. If you click “Computers” a second time, the list then disappears. (The header toggles the list below it.) Radical.

Now, the jQuery. This code is super chill: anything that is an anchor with the class “toggleLink” will perform the showing function on the list immediately below it, and anything with class “toggle” will be hidden initially and will appear when its parent link is clicked.

Cheers!