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.

Here’s an example.

Download the plugin from Github or copy-paste from below:

Add a comment