Accordion
A stack of collapsible panels where the open item rises as a soft chip.
Basic
Each .accordion__item carries data-state="open|closed": a closed item sits transparent on the frame, an open one fills with a surface chip and reveals its body. The toggling — the measured height transition and single-open coordination — comes from the @stisla/vanilla layer via data-stisla-accordion on the root and data-stisla-accordion-trigger on each button. Multiple items may stay open at once. The demos below are live: click a header to expand it.
Keyboard
Each .accordion__trigger is a native <button>, so the browser handles focus and activation.
| Key | Action |
|---|---|
| Tab | Move focus to the next trigger, or out of the accordion |
| Shift + Tab | Move focus backward |
| Enter / Space | Toggle the focused panel |
Single open
Add data-stisla-accordion-type="single" on the root to enforce one-open-at-a-time. Opening any trigger closes the others.
Seamless in a card
Add .accordion--seamless to drop the outer frame so the accordion sits edge-to-edge inside a card or page. Items lose their chip inset and a single divider sits between rows.
With leading icon
Drop an icon inside the trigger before the label. The chevron stays pinned to the end.
Disabled item
A native disabled on the trigger fades it and blocks the toggle.
Events
stisla:accordion:value-change fires on the accordion root after a successful open or close. The detail object carries the freshly-changed item under value, the prior selection under previousValue, and the full set of currently-open items under openItems. Use it to sync URL hash state, persist the last-open item, or react to user navigation through the panels.
Customization
These variables retune the stack. Override on the root or any wrapper.
| Variable | Use |
|---|---|
--accordion-gap | Space between items |
--accordion-padding-block / -padding-inline | Frame inset; also feeds the concentric item radius |
--accordion-bg | Frame background |
--accordion-border-color / -border-width | Frame rim |
--accordion-radius / -shadow | Frame corner radius and elevation |
--accordion-item-open-bg / -item-open-border-color | Open chip fill and rim |
--accordion-trigger-padding-block / -padding-inline | Trigger interior padding |
--accordion-trigger-font-size / -font-weight | Trigger label type |
--accordion-trigger-color / -bg / -bg-hover | Trigger text, fill, and closed-item hover |
--accordion-trigger-divider-color | Line under an open trigger |
--accordion-ring | Focus outline color |
--accordion-icon-size / -icon-color / -icon-transition-duration | Chevron size, color, and rotation timing |
--accordion-body-color | Body text color |
--accordion-body-padding-block / -padding-inline | Body interior padding |