You can find the
with the Popover API!
Now that we’re 5+ years into
The basic markup
It’s a single element:
Open and close the element to toggle this content.
That “details” label is a default. We can insert a
Toggle content
Open and close the element to toggle this content.
From here, the world is sorta our oyster because we can stuff any HTML we want inside the element:
Toggle content
Open and close the element to toggle this content.
The content is (sorta) searchable
The trouble with tucking content inside an element like this is that it’s hidden by default. Early on, this was considered an inaccessible practice because the content was undetected by in-page searching (like using CMD+F on the page), but that’s since changed, at least in Chrome, which will open the
That’s unfortunately not the case in Firefox and Safari, both of which skip the content stuffed inside a closed
element is open, while Safari (testing 18.1) skips it altogether. That could very well change by the end of this year since searchability is one of the items being tackled in Interop 2025.
So, as for now, it’s a good idea to keep important content out of a
is often used as a pattern for Frequently Asked Questions, where each “question” is an expandable “answer” that reveals additional information. That might not be the best idea if that content should be searchable on the page, at least for now.
Open one at a time
All we have to do is give each
name attribute:
Open Note
...
This allows the elements to behave a lot more like true accordions, where one panel collapses when another expands.
Style the marker
The marker is that little triangle that indicates whether the
::marker pseudo-element to style it, though it does come with constraints, namely that all we can do is change the color and font size, at least in Chrome and Firefox which both fully support ::marker. Safari partially supports it in the sense that it works for ordered and unordered list items (e.g., li::marker), but not for
(e.g., summary::marker).
Let’s look at an example that styles the markers for both
::marker in both places, but Safari only works with the unordered list.
Notice how the ::marker selector in that last example selects both the
element if we want to target just that marker, right?
/* This doesn't work! */
details::marker {
/* styles */
}Nope! Instead, we need to scope it to the
/* This does work */
summary::marker {
/* styles */
}You might think that we can style the marker even if we were to leave the summary out of the markup. After all, HTML automatically inserts one for us by default. But that’s not the case. The
::marker selector that should match both
elements, but only the second one matches because it contains a
in the HTML. Again, only Chrome and Firefox support for the time being:
You might also think that we can swap out the triangle for something else since that’s something we can absolutely do with list items by way of the list-style-type property:
/* Does not work! */
summary::marker {
list-style-type: square;
}…but alas, that’s not the case. An article over at web.dev says that it does work, but I’ve been unsuccessful at getting a proper example to work in any browser.
That isn’t to say it shouldn’t work that way, but the specification isn’t explicit about it, so I have no expectations one way or another. Perhaps we’ll see an edit in a future specification that gets specific with
And what about removing the marker altogether? All we need to do is set the content property on it with an empty string value and voilà!
Once the marker is gone, you could decide to craft your own custom marker with CSS by hooking into the
::before pseudo-element.
Just take note that Safari displays both the default marker and the custom one since it does not support the ::marker pseudo-element at the time I’m writing this. You’re probably as tired reading that as I am typing it. 🤓
Style the content
Let’s say all you need to do is slap a background color on the content inside the
details {
background: oklch(95% 0.1812 38.35);
}That’s cool, but it would be better if it only set the background color when the element is in an open state. We can use an attribute selector for that:
details[open] {
background: oklch(95% 0.1812 38.35);
}OK, but what about the
and select that instead:
details[open] div {
background: oklch(95% 0.1812 38.35);
}
What’s even better is using the ::details-content pseudo-element as a selector. This way, we can select everything inside the
element without reaching for more markup:
::details-content {
background: oklch(95% 0.1812 38.35);
}
There’s no need to include details in the selector since ::details-content is only ever selectable in the context of a
element. So, it’s like we’re implicitly writing details::details-content.
The ::details-content pseudo is still gaining browser support when I’m writing this, so it’s worth keeping an eye on it and using it cautiously in the meantime.
Animate the opening and closing
Click a default
element and it immediately snaps open and closed. I’m not opposed to that, but there are times when it might look (and feel) nice to transition like a smooth operator between the open and closed states. It used to take some clever hackery to pull this off, as Louis Hoebregts demonstrated using the Web Animations API several years back. Robin Rendle shared another way that uses a CSS animation:
details[open] p {
animation: animateDown 0.2s linear forwards;
}
@keyframes animateDown {
0% {
opacity: 0;
transform: translatey(-15px);
}
100% {
opacity: 1;
transform: translatey(0);
}
}
He sprinkled in a little JavaScript to make his final example fully interactive, but you get the idea:
Notice what’s happening in there. Robin selects the paragraph element inside the
element when it is in an open state then triggers the animation. And that animation uses clever positioning to make it happen. That’s because there’s no way to know exactly how tall the paragraph — or the parent
element — is when expanded. We have to use explicit sizing, padding, and positioning to pull it all together.
But guess what? Since then, we got a big gift from CSS that allows us to animate an element from zero height to its auto (i.e., intrinsic) height, even if we don’t know the exact value of that auto height in advance. We start with zero height and clip the overflow so nothing hangs out. And since we have the ::details-content pseudo, we can directly select that rather than introducing more markup to the HTML.
::details-content {
transition: height 0.5s ease, content-visibility 0.5s ease allow-discrete;
height: 0;
overflow: clip;
}
Now we can opt into auto-height transitions using the interpolate-size property which was created just to enable transitions to keyword values, such as auto. We set it on the :root element so that it’s available everywhere, though you could scope it directly to a more specific instance if you’d like.
:root {
interpolate-size: allow-keywords;
}
Next up, we select the
element in its open state and set the ::details-content height to auto:
[open]::details-content {
height: auto;
}
We can make it so that this only applies if the browser supports auto-height transitions:
@supports (interpolate-size: allow-keywords) {
:root {
interpolate-size: allow-keywords;
}
[open]::details-content {
height: auto;
}
}
And finally, we set the transition on the ::details-content pseudo to activate it:
::details-content {
transition: height 0.5s ease;
height: 0;
overflow: clip;
}
/* Browser supports interpolate-size */
@supports (interpolate-size: allow-keywords) {
:root {
interpolate-size: allow-keywords;
}
[open]::details-content {
height: auto;
}
}
But wait! Notice how the animation works when opening
, but things snap back when closing it. Bramus notes that we need to include the content-visibility property in the transition because (1) it is implicitly set on the element and (2) it maps to a hidden state when the
element is closed. That’s what causes the content to snap to hidden when closing the
. So, let’s add content-visibility to our list of transitions:
::details-content {
transition: height 0.5s ease, content-visibility 0.5s ease allow-discrete;
height: 0;
overflow: clip;
}
/* Browser supports interpolate-size */
@supports (interpolate-size: allow-keywords) {
:root {
interpolate-size: allow-keywords;
}
[open]::details-content {
height: auto;
}
}
That’s much better:
Note the allow-discrete keyword which we need to set since content-visibility is a property that only supports discrete animations and transitions.
Interesting tricks
Chris has a demo that uses
as a system for floating footnotes in content. I forked it and added the name attribute to each footnote so that they close when another one is opened.
I mentioned John Rhea’s “Pop(over) The Balloons” game at the top of these notes:
Bramus with a slick-looking horizontal accordion forked from another example. Note how the
element is used as a flex container:
Chris with another clever trick that uses
to play and pause animated GIF image files. It’s doesn’t actually “pause” but the effect makes it seem like it does.
Ryan Trimble with styling
as a dropdown menu and then using anchor positioning to set where the content opens.
References
Your post is thought-provoking and stimulating. Thanks for sharing your unique perspective on this topic.