Skip to content
DisclosureBrowse disclosure components
ComponentsDisclosureNew in 0.2

Accordion

Collapsible sections with rotating chevron and animated content.

Live preview

Up to 3 workspaces, 5,000 events / month, and 14-day audit log retention.

Usage

Adapters:React stableVue stable
index.html
<div class="lm-accordion-item">
  <button class="lm-accordion-trigger" aria-expanded="true" aria-controls="panel-1">…</button>
  <div class="lm-accordion-content" id="panel-1" role="region">…</div>
</div>

CSS classes (4)

ClassDescription
lm-accordionCard-styled wrapper
lm-accordion-itemEach section
lm-accordion-triggerHeader button (rotates ›)
lm-accordion-contentCollapsible body

React props (2)

PropTypeDefaultDescription
typesingle | multiplesingle
defaultValuestring | string[]

Accessibility

  • Trigger: aria-expanded + aria-controls.
  • Content: role='region' + aria-labelledby.

Spotted something wrong? Edit this entry on GitHub.