The Accordion
No libraries.

An accordion is a UI pattern that vertically stacks a list of items — each with a header that can be clicked to reveal or hide its associated content. It's perfect for FAQs, settings panels, and any content where you want to save vertical space while keeping everything within reach.

The smooth open/close uses a pure CSS technique: animating grid-template-rows from 0fr to 1fr. This is better than max-height hacks (which require a hardcoded value) and avoids any JavaScript height measurement. The browser handles all the math, and the transition is perfectly fluid at every content size.

Yes. Each trigger is a real <button> element so it gets keyboard focus and Enter/Space activation for free. The aria-expanded attribute is updated on every toggle so screen readers announce the correct state. Content panels use role="region" so they're properly sectioned.

Use the toggle above to switch between modes in real time. In exclusive mode, clicking a new item closes all siblings first — great for FAQs. In multi-open mode, each panel toggles independently — great for settings or checklists where users compare multiple sections.

Copy any .acc-item block and update the title, subtitle, and content inside .acc-content-text. The script uses querySelectorAll('.acc-item') so it picks up new items automatically — no JavaScript changes needed. You can also swap the SVG icon inside .acc-icon-wrap per item for extra personality.

The grid-template-rows animation technique works in all modern browsers — Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+. This covers effectively 98%+ of users worldwide as of 2025. No polyfills required, no fallback needed for the animation (the content still opens, just without the transition in very old browsers).