Accordion

Exclusive open, animated height auto, correct semantics, find-in-page support. The browser does all of it.

details-contentinterpolate-size

PreviewCode

<div class="w-full max-w-md [interpolate-size:allow-keywords]">
  <details
    name="acc-faq"
    open
    class="group border-b border-border details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-250 details-content:ease-out open:details-content:h-auto"
  >
    <summary class="flex cursor-pointer list-none items-center justify-between gap-4 rounded-sm py-4 text-sm font-medium hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&::-webkit-details-marker]:hidden after:size-2.5 after:shrink-0 after:rotate-45 after:border-r-[1.5px] after:border-b-[1.5px] after:border-muted-foreground after:transition-transform after:content-[''] group-open:after:rotate-[225deg]">
      Is it accessible?
    </summary>
    <div class="pb-4 text-sm text-muted-foreground">
      Yes — <code>&lt;details&gt;</code>/<code>&lt;summary&gt;</code> ship with keyboard support and
      correct semantics, and the content stays in the DOM for crawlers and find-in-page.
    </div>
  </details>
  <details
    name="acc-faq"
    class="group border-b border-border details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-250 details-content:ease-out open:details-content:h-auto"
  >
    <summary class="flex cursor-pointer list-none items-center justify-between gap-4 rounded-sm py-4 text-sm font-medium hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&::-webkit-details-marker]:hidden after:size-2.5 after:shrink-0 after:rotate-45 after:border-r-[1.5px] after:border-b-[1.5px] after:border-muted-foreground after:transition-transform after:content-[''] group-open:after:rotate-[225deg]">
      Can it animate height: auto?
    </summary>
    <div class="pb-4 text-sm text-muted-foreground">
      Yes. <code>interpolate-size: allow-keywords</code> on the wrapper lets
      <code>::details-content</code> transition from <code>height: 0</code> to
      <code>height: auto</code>. No measuring, no JavaScript.
    </div>
  </details>
  <details
    name="acc-faq"
    class="group border-b border-border details-content:h-0 details-content:overflow-clip details-content:transition-[height,content-visibility] details-content:transition-discrete details-content:duration-250 details-content:ease-out open:details-content:h-auto"
  >
    <summary class="flex cursor-pointer list-none items-center justify-between gap-4 rounded-sm py-4 text-sm font-medium hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [&::-webkit-details-marker]:hidden after:size-2.5 after:shrink-0 after:rotate-45 after:border-r-[1.5px] after:border-b-[1.5px] after:border-muted-foreground after:transition-transform after:content-[''] group-open:after:rotate-[225deg]">
      Only one open at a time?
    </summary>
    <div class="pb-4 text-sm text-muted-foreground">
      The <code>name</code> attribute makes the group exclusive — the browser closes the others
      for you.
    </div>
  </details>
</div>

How it works

<details name="acc-faq"> makes the group exclusive — the browser closes the other panels.
details-content:h-0 → open:details-content:h-auto animates the panel height. The trick that makes height: auto animatable is [interpolate-size:allow-keywords] on the wrapper — it’s an inherited property, so one wrapper class covers every panel and the snippet is fully self-contained (nothing to add to your CSS config).
details-content:transition-discrete (transition-behavior: allow-discrete) keeps the content painted (content-visibility) while it collapses, so the close animation is visible too.
The chevron is a after: pseudo-element rotated with group-open:.

Accessibility

<details>/<summary> ship keyboard support and disclosure semantics natively, and unlike display: none accordions, collapsed content is still searchable with find-in-page in Chromium (content-visibility: hidden keeps it in the DOM).

Browser support

Minimum stable version per engine, resolved at build time from MDN's browser-compat-data; Baseline status from the official web-features dataset. Everything degrades gracefully — the “when missing” column is the actual behavior, not a broken page.

Feature	Chrome	Edge	Firefox	Safari	When missing
Exclusive accordions (<details name>)Baseline 2024 · newly available	120	120	130	17.2	All panels can be open at the same time — still fully functional.
::details-content pseudo-elementBaseline 2025 · newly available	131	131	143	18.4	Panels open and close instantly, without the height animation.
interpolate-size: allow-keywordsLimited availability	129	129	✕	✕	height: auto cannot be interpolated, so content snaps open instead of easing.

‡ HTML feature — @supports can only test CSS, and we ship no JS to detect it, so it gets no live badge.