CSS Animated Accordion

How It Works

body {
  interpolate-size: allow-keywords;
}

.content {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.4s ease, opacity 0.4s ease;
}

details[open] .content {
  height: auto;
  opacity: 1;
}

Summary

• interpolate-size: allow-keywords tells the browser it’s OK to animate between height: 0 and height: auto. Previously, CSS could not transition to auto — you had to measure content height with JavaScript.
• The <details> and <summary> elements provide built-in accordion behavior — no JavaScript toggle logic needed.
• This replaces Headless UI Disclosure, Radix Accordion, React Collapse, and any custom JavaScript that uses scrollHeight + requestAnimationFrame.
• The accordion is natively accessible — screen readers announce expandable sections, keyboard users can toggle with Enter/Space, and the open/closed state is communicated automatically.
• Supported in Chrome 129+ (Sep 2024) and Edge 129+. Safari and Firefox do not support interpolate-size yet. In unsupported browsers, the accordion still works — it just opens instantly without animation (progressive enhancement).