Accordions
<details name> for an exclusive accordion
Chrome120
Edge120
Firefox130
Safari17.2
Features it needs
- Mutually exclusive <details> elementsNewly available
Giving several <details> elements the same name attribute makes them exclusive: opening one closes the others, which is the whole behaviour an accordion component implements. The disclosure semantics, keyboard handling and the open state itself are already in the element. What you add is styling for the marker and, if you want it, an open and close animation.
When this applies
Building an FAQ or accordion where opening one panel should close the others.
The native approach
<details name="faq" open>
<summary>What does this cost?</summary>
<p>Nothing.</p>
</details>
<details name="faq">
<summary>Where does the data come from?</summary>
<p>The web-features package, the same source Baseline uses.</p>
</details>
<style>
details {
border-bottom: 1px solid currentColor;
}
summary {
cursor: pointer;
padding: 0.75rem 0;
}
/* Swap the default triangle for your own marker. */
summary::marker {
content: "";
}
</style>When the dependency is still right
An answer that always says "the platform covers it" is worse than no answer. These are the cases where this one does not hold.
- Your support target predates the name attribute on <details>. Older browsers ignore it silently rather than failing, so every panel opens independently and the one behaviour this rule promises is the one that quietly does not happen.
- You need to animate the panel height. That needs interpolate-size or calc-size(), which is Chromium-only today.
- You need several panels open at once with a controlled open state driven by application logic. Drop the name attribute for independent panels, but co-ordinated state still needs JavaScript.
- You need the header to be something other than a summary element, for example a heading that also holds a separate action button.
- You need to deep-link to a panel and have it open on load without JavaScript, which the platform does not cover.
Building it
This catalog stops at the swap. These guides go through the implementation and the fallbacks, and each one reads in the terminal through its own command.
- Search hidden content
npx -y modern-web-guidance@latest retrieve "search-hidden-content"
Signs it was hand-rolled
No package is involved in any of these, so nothing would match in a package.json. If the code looks like one of them, this rule applies anyway, and the conditions above still decide.
- an open id over a list of collapsible panels, where opening one sets every other closed