Accordion

stable 2.2 kB
<hk-accordion>

Animates on grid-template-rows rather than max-height, so panels of unknown content height still ease properly.

#collapse#faq

Live demo

Running in this page — interact with it.

Inputs

NameTypeDefaultDescription
multiplebooleanfalseAllows more than one panel open.
openstring[][]Ids of open panels. Two-way bindable.

Outputs

  • toggledEventEmitter<string>

    Emits the panel id that changed.

Keyboard

  • Enter / Space Toggle the focused panel
  • ↑ / ↓ Move between headers

Theming

This one adds no tokens of its own — it renders entirely from the global token layer.

Accessibility

  • Headers are real buttons with aria-expanded and aria-controls.

More in Feedback