Progressive disclosure with HTML

Robin penned a little love letter to the details element. I agree. It is a joyous piece of declarative power.

That said, don’t go overboard with it. It’s not a drop-in replacement for more complex widgets. But it is a handy encapsulation of straightforward progressive disclosure.

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.

<summary>There are 181 recordings of this tune.</summary>
This tune has been recorded together with

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.

The details element rides to the rescue once again.

Compare the tune I mentioned above, which only has a few aliases, to another tune that is known by many names.

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.

<summary>There are 31 other names for this tune.</summary>
<p>Also known as…</p>

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

But there’s one house rule that’s most important (“Be civil”) so that details element gets an additional open attribute.

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

Have you published a response to this? :



@adactio Hey Jeremy, I really enjoyed reading your article. Thanks for sharing.

Also, it looks like you linked to the same tune (The Maid Behind The Bar) when you meant to compare it with some other tune.

# Posted by Arpit on Monday, April 17th, 2023 at 9:24am


# Shared by Sam Minnée on Saturday, April 15th, 2023 at 7:54am

# Shared by Martin Grubinger on Saturday, April 15th, 2023 at 8:57am

# Shared by Arpit on Monday, April 17th, 2023 at 9:33am


# Liked by Emma Builds 🚀 on Saturday, April 15th, 2023 at 7:54am

# Liked by Toby on Saturday, April 15th, 2023 at 8:22am

# Liked by Jono Ferguson on Saturday, April 15th, 2023 at 8:22am

# Liked by Martin Grubinger on Saturday, April 15th, 2023 at 8:57am

# Liked by Chris Taylor on Saturday, April 15th, 2023 at 8:57am

# Liked by Danilo Vega on Saturday, April 15th, 2023 at 10:33am

# Liked by Alan Dalton on Saturday, April 15th, 2023 at 11:30am

Previously on this day

5 years ago I wrote The audience for Going Offline

A book about service workers that doesn’t assume any prior knowledge of JavaScript.

8 years ago I wrote 100 words 024

Day twenty four.

8 years ago I wrote Hope

Judicious hope.

17 years ago I wrote Dichotomy

Not everything is black and white.

18 years ago I wrote Mo betta selecta

Aaron Gustafson is one smart cookie.

18 years ago I wrote Fixed fashion

Slap your PayPal payment down for the latest issue of Design In Flight, the PDF magazine for design professionals and web developers.

20 years ago I wrote Safari Public Beta 2

There’s a new Public Beta of Safari available for download.

21 years ago I wrote The grocer's apostrophe

While I was in town earlier today, I spotted these stickers posted up on every available surface.