Entry 03

Accordion that animates its height

Use it for FAQs and any other disclosure. <details> already gives you the toggle, keyboard support and find-in-page. These rules animate the open and the close with no JavaScript.

Open

Open and close each one. In Chrome the height eases both ways and the text stays visible until it has closed.

Code CSS · 16 lines

:root { interpolate-size: allow-keywords; }

details::details-content {
  height: 0;
  overflow: clip;
}

details[open]::details-content { height: auto; }

@media (prefers-reduced-motion: no-preference) {
  details::details-content {
    transition:
      height 0.3s var(--ease-out, ease-out),
      content-visibility 0.3s allow-discrete;
  }
}

Why it works, the rules and the credits 3 reasons · 4 rules · support · credits

Why it works

::details-content is the box the browser wraps around everything in <details> except the <summary>.
interpolate-size: allow-keywords lets a transition run between a length and auto. It inherits, so one declaration on :root covers the page.
A closed <details> hides its content with content-visibility. Transitioning that property with allow-discrete keeps the content rendered until the height reaches zero. Leave it out and the close snaps.

Rules

Put padding on an element inside, never on ::details-content. Padding there stays visible when the accordion is closed.
Give sibling <details> the same name attribute to keep one open at a time.
Hide the marker with summary { list-style: none; } plus summary::-webkit-details-marker { display: none; } for Safari.
Write no fallback. Safari and Firefox do not support interpolate-size yet, so they open and close without the animation.

Support

::details-content in Chrome 131, Safari 18.4, Firefox 143. interpolate-size in Chrome 129 only.

Credits

Borrowed from: Bramus Van Damme, Animate to height: auto

Docs: MDN: ::details-content · MDN: interpolate-size · MDN: transition-behavior