Accordion
Collapsible sections built on native details and summary elements. No JavaScript.
The accordion is a .accordion wrapping native <details> and <summary> elements.
Open/close state, keyboard support, and the height transition (via ::details-content) are
handled by the browser.
Default
<div class="accordion"> <details class="border-b"> <summary class="font-strong hover:text-muted-foreground"> What is an accordion? <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> </summary> <div class="pb-sm"> <p> A disclosure widget built from the native <code><details></code> and <code><summary></code> elements. The open/close animation uses the <code>::details-content</code> pseudo-element — no JavaScript. </p> </div> </details> <details class="border-b"> <summary class="font-strong hover:text-muted-foreground"> How does it work? <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> </summary> <div class="pb-sm"> <p> Each item is a separate <code><details></code>, so several can stay open at once. Click a summary or focus it and press Enter to toggle. </p> </div> </details> <details class="border-b"> <summary class="font-strong hover:text-muted-foreground"> Why use it? <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"> <rect width="256" height="256" fill="none" /> <polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16" /> </svg> </summary> <div class="pb-sm"> <p> Keyboard support, state, and accessibility come from the platform — Zazz only styles the chrome through theme tokens. </p> </div> </details></div>There are no data-* attributes to configure. Author each panel as a <details class="border-b">
with a <summary class="font-strong hover:text-muted-foreground">, an inline chevron <svg>
that rotates on open, and a <div class="pb-sm"> body. Multiple panels can be open at once by
default; give a group of <details> the same name to make them mutually exclusive.
Theming runs through tokens: --accordion-summary-padding-block, --accordion-icon-size, and
--accordion-icon-transform-open (the open-state chevron rotation).