A little known new feature of HTML5 are the <details> and <summary> tags. Combined, you can use these two tags to create a disclosure widget. Something you’ve probably seen before. Here’s an example from the Mac Finder:
Clicking the arrow next to ‘Devices’ hides or shows the ‘children’ under it. A very useful interface element. Until now, there was no standard for doing that (i usually used <fieldset> and <legend> to code it).
Unfortunately, it’s not supported in any browser (yet). But thanks to the power of jQuery we can make a very simple plugin that emulates this behaviour. My version is really simple, but if you need something more sophisticated check out @mathias’ solution.
Download the plugin from Github or copy-paste from below: