The richness of HTML continues to be a delightful surprise.

For example, take an unassuming element like <details>. We've all seen it before. Here it is in its pure form:

We can merrily click the summary to open and close the details to our heart's content. But this is kind of plain-looking. Can we change that triangle into something else?

In a just world, this would work by neatly styling the ::marker pseudo-element, but like so often Safari is being annoying. Thankfully we can instead replace the marker by removing it with list-style: none; and adding a new summary marker on the ::before or ::after pseudo-elements.

And really, the summary element can contain anything at all, inviting our creativity. Here's a fancier example that replaces the marker by an animated svg icon.

There's no reason to stop at decorating the marker though. We can make the details element look like anything we want, all it takes is the right CSS. If we wanted, we could make it look like a card.

One caveat with this example is the ::details-content pseudo-element used to select the expanded content area. This is baseline 2025 so still pretty new. For older browsers you can wrap the content in a div and style that instead.

But wait, there's more! In baseline 2024 <details> picked up a neat trick where all the elements with the same name attribute are mutually exclusive, meaning only one can be open at the same time. All we have to do is stack them to magically get an accordion.

There's no magic code here to make the accordion work aside from the name attributes. HTML is doing the magic for us, which means this also happens to be fully keyboard-navigable and accessible. The only tricky bit is animating the expanding and collapsing of the cards. In this example that is implemented using interpolate-size: allow-keywords, which is a Chromium-only trick hopefully coming to other browsers near you. Thankfully in those other browsers this is still perfectly functional, just not as smoothly animating.

By the way, the mutually exclusive <details> elements do not even need to share a parent element. These accordion cards could be wrapped in custom elements, or <fieldset> or <form> elements, and they would work just fine in all browsers, today. But you'll have to take my word for it. After all, I have to leave some exercises up to the reader. 😉

Like I said, the richness of HTML continues to be a delightful surprise. If you ask me then <details> has a bright future ahead of it.

No JavaScript was harmed in the making of this blog post.