Progressive disclosure with HTML
Robin penned a little love letter to the
details element. I agree. It is a joyous piece of declarative power.
Just last week I added a couple of more
details elements to The Session …kind of. There’s a bit of server-side conditional logic involved to determine whether
details is the right element.
When you’re looking at a tune, one of the pieces of information you see is how many recordings there of that tune. Now if there are a lot of recordings, then there’s some additional information about which other tunes this one gets recorded with. That information is extra. Mere details, if you will.
You can see it in action on this tune listing. Thanks to the
details element, the extra information is available to those who want it, but by default that information is tucked away—very handy for not clogging up that part of the page.
<details> <summary>There are 181 recordings of this tune.</summary> This tune has been recorded together with <ul> <li>…</li> <li>…</li> <li>…</li> </ul> </details>
Likewise, each tune page includes any aliases for the tune (in Irish music, the same tune can have many different titles—and the same title can be attached to many different tunes). If a tune has just a handful of aliases, they’re displayed in situ. But once you start listing out more than twenty names, it gets overwhelming.
details element rides to the rescue once again.
Again, the main gist is immediately available to everyone—how many aliases are there? But if you want to go through them all, you can toggle that
details element open.
You can effectively think of the
summary element as the TL;DR of HTML.
<details> <summary>There are 31 other names for this tune.</summary> <p>Also known as…</p> </details>
There’s another classic use of the
details element: frequently asked questions. In the case of The Session, I’ve marked up the house rules and FAQs inside
details elements, with the rule or question as the
But there’s one house rule that’s most important (“Be civil”) so that
details element gets an additional
<details open> <summary>Be civil</summary> <p>Contributions should be constructive and polite, not mean-spirited or contributed with the intention of causing trouble.</p> </details>