Progressive disclosure with HTML
Tags: thesession, details, summary, html
Published: 2023-06-12 15:28:41

---
title: Progressive disclosure with HTML
published: true
date: 2023-04-15 07:32:25 UTC
tags: thesession,details,summary,html
canonical_url: https://adactio.com/journal/20083
---

Robin penned [a little love letter to the `details` element](https://www.robinrendle.com/notes/the-details-element-is-amazing/). I agree. It is a joyous piece of declarative power.

That said, [don’t go overboard with it](https://adrianroselli.com/2019/04/details-summary-are-not-insert-control-here.html). It’s not a drop-in replacement for more complex widgets. But it is a handy encapsulation of straightforward [progressive disclosure](https://en.wikipedia.org/wiki/Progressive_disclosure).

Just last week I added a couple of more `details` elements to [The Session](https://thesession.org) …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](https://thesession.org/tunes/64). 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.

The `details` element rides to the rescue once again.

Compare [the tune I mentioned above](https://thesession.org/tunes/64), which only has a few aliases, to [another tune](https://thesession.org/tunes/64) 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 <abbr title="Too Long; Didn’t Read">TL;DR</abbr> 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](https://thesession.org/help) 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>
</details>

```