Accordion

Collapsible panels for progressively disclosing content. Use when you have grouped information that doesn't need to be visible at once — FAQ lists, settings sections, nested details, filter groups. Avoid for primary navigation; use tabs or nav instead.

a11y (built in): triggers are real <button>s, so Enter/Space and the native disabled attribute work without extra wiring. The controller pairs each trigger with its panel — aria-expanded + aria-controls on the trigger, role=region + aria-labelledby on the panel — and collapses with the hidden attribute, so a closed panel leaves both the tab order and the accessibility tree. Chevrons are aria-hidden; every trigger is its own tab stop (no roving tabindex) with a :focus-visible ring.

Usage: Set data-lb-accordion on the root. Each item needs a .lb-accordion__trigger button and matching .lb-accordion__panel. The trigger's right cluster (.lb-accordion__indicators) holds an optional .lb-counter count + chevron.

Accordion Demo

With leading icons

Add an optional .lb-accordion__icon slot before the label — useful for category-style accordions (settings panels, theme editors, sidebar groups) where each section has a recognisable visual anchor. Inherits trigger color, so disabled/hover states flow through.

Filter accordion — with count badges

Reuses the shared Counter (.lb-counter) to show how many filters are active inside a collapsed section.