Accordion — Interactive

Accordion / Collapsible

Expandable content sections for FAQs, settings panels, and progressive disclosure. Use accordions to keep dense content scannable while revealing details on demand.

Basic Accordion

This is the content of the first accordion item.

This is the content of the second accordion item.

This is the content of the third accordion item.

<div class="accordion">
  <div class="accordion-item">
    <button class="accordion-header">
      <span>Item Title</span>
      <span class="accordion-icon"></span>
    </button>
    <div class="accordion-body">
      <div class="accordion-content">Item content goes here</div>
    </div>
  </div>
</div>

Flush Variant

Flush removes the per-item box treatment and stacks rows edge-to-edge, using dividers instead of separate bordered cards.

Theme-aware colors, spacing, and typography are inherited from global tokens.

Keyboard and focus interactions are handled by the framework component runtime.

<div class="accordion accordion-flush">
  <div class="accordion-item">
    <button class="accordion-header">
      <span>Section Title</span>
      <span class="accordion-icon"></span>
    </button>
    <div class="accordion-body">
      <div class="accordion-content">Flush content goes here</div>
    </div>
  </div>
</div>

API Reference

Wiring

<!-- Toggle .is-open from component state -->
<div class="accordion-item" :class="{ 'is-open': open[i] }">
  <button class="accordion-header" @click="open[i] = !open[i]">…</button>
  <div class="accordion-body"><div class="accordion-content">…</div></div>
</div>

CSS Classes

Class Name	Description
`.accordion`	Base container for a group of collapsible items.
`.accordion-item`	Wrapper for one header/body pair.
`.accordion-header`	Clickable trigger that expands or collapses item content.
`.accordion-icon`	Chevron indicator that rotates with state changes.
`.accordion-body`	Expandable content panel.
`.accordion-content`	Inner content wrapper with readable spacing.
`.accordion-flush`	Variant that removes per-item outer borders and spacing so rows stack with divider lines instead of separate cards.
`.is-open`	Runtime class applied to an item when expanded.