Back to the catalog

Accordions

Forms & Interactive Controls

<details name> for an exclusive accordion

Baseline newly availablederived from web-features, captured 2026-09-06
  • Chrome120
  • Edge120
  • Firefox130
  • Safari17.2

Features it needs

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> for an exclusive accordion
<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>
Live example

MDN reference

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. They come from Google Chrome's modern-web-guidance, Apache-2.0.

Packages this covers

Minified and gzipped, captured 2026-09-06.