accordion
Accordion component with expandable/collapsible panels.
Single-open mode: all panels share the same
name attribute, so only one panel can be open at a
time — opening one automatically closes the others.
What is an accordion?
An accordion is a UI pattern that organizes content into expandable and collapsible sections to save space and present content in a focused way.
Does it need JavaScript?
No, the base functionality works entirely without JavaScript
via <details> and <summary>.
Only the smooth height animation in older browsers is added via
JS.
What about accessibility?
Browsers automatically derive the expanded state for screen
readers from the open attribute.
aria-expanded therefore does not need to be set
manually.
Multi-open mode: the name attribute is
omitted, so each panel toggles independently and several panels can
stay open at the same time.
Panel A
Content of panel A. This panel can be open independently of the others.
Panel B
Content of panel B.