← Demo hub

<details> + height transition

Try: Open and close the items. Smooth height animation appears in browsers that support interpolate-size and ::details-content; others still get working disclosure.

Shipping

Free over $50. Arrives in 3–5 business days.

Returns

30-day returns. Label included in the box.

Exclusive accordion: multiple <details name="faq"> (same name) is supported in newer Chromium; Safari/Firefox may vary—test before relying on it.

Source

<details>
  <summary>Shipping</summary>
  <div class="inner"><p>…</p></div>
</details>

@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  details::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.35s ease,
      content-visibility 0.35s allow-discrete;
  }
  details[open]::details-content {
    height: auto;
  }
}
Support: <details> is universal. Animated ::details-content + interpolate-size is newer (Chrome 129+). Graceful degradation is built in.