Build a zero-JS accordion using <details>/<summary> + CSS animation. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.
Use Cases
Frontend developers building FAQ sections without JavaScript dependencies
UI designers prototyping accordion styles for settings and preference panels
Accessibility engineers ensuring accordions work with screen readers natively
Tips
Uses native HTML details/summary elements for zero-JavaScript interactivity
Customize the open/close animation timing and easing curve
Style the summary marker to match your design system's icon set
Fun Facts
The HTML <details> and <summary> elements were first specified in HTML5 (2014) and provide built-in disclosure widgets without any JavaScript — but CSS animation support came later.
Before <details>/<summary>, accordion UIs required JavaScript event listeners and DOM manipulation — jQuery UI's Accordion widget (2007) was the de facto solution for over a decade.
Animating the <details> element's content height is still tricky in 2024 because content inside goes from display:none to block — CSS interpolate-size may finally solve this.
FAQ
How does a zero-JS accordion work?
HTML's <details>/<summary> elements. They open/close natively; CSS adds the animation and style. No JavaScript needed for the basic behavior.
Can I animate the open/close?
Yes — modern browsers support animating grid-template-rows or max-height for the smooth reveal. The tool generates the keyframes for you.
Is it accessible?
Native <details> has proper ARIA semantics built in (aria-expanded, role=group). No extra attributes needed for screen readers to announce it correctly.
What about controlling which panels are open?
Group multiple <details> with a shared `name` attribute to get radio-like behavior (only one open at a time). Without `name` they operate independently.
