Accordion

A collapsible content component for organizing information into expandable/collapsible panels. Perfect for FAQs, categories, or sections.

Installation

npx @zizigy/capsule add Accordion

Usage

Basic Accordion

<capsule-accordion>
  <capsule-accordion-panel>
    <capsule-accordion-trigger> Is it accessible? </capsule-accordion-trigger>
    <capsule-accordion-content>
      Yes. It adheres to the WAI-ARIA design pattern.
    </capsule-accordion-content>
  </capsule-accordion-panel>
</capsule-accordion>

Type: Single (default)

<capsule-accordion type="single">
  <capsule-accordion-panel open> ... </capsule-accordion-panel>
</capsule-accordion>

Type: Multiple

<capsule-accordion type="multiple">
  <capsule-accordion-panel>...</capsule-accordion-panel>
  <capsule-accordion-panel>...</capsule-accordion-panel>
</capsule-accordion>

Collapsible

When collapsible attribute is present, you can close all panels (including the first one).

<capsule-accordion collapsible>
  <capsule-accordion-panel open>...</capsule-accordion-panel>
</capsule-accordion>

Custom Trigger Content

The trigger slot accepts any content, including buttons, icons, or other interactive elements.

<capsule-accordion>
  <capsule-accordion-panel>
    <capsule-accordion-trigger exclude-self>
      <capsule-button size="sm">
        <svg>...</svg>
        <span>Settings</span>
      </capsule-button>
    </capsule-accordion-trigger>
    <capsule-accordion-content> ... </capsule-accordion-content>
  </capsule-accordion-panel>
</capsule-accordion>

Components

The Accordion component consists of several sub-components:

capsule-accordion

The main container for accordion panels.

capsule-accordion-panel

An individual accordion panel. Can have open attribute to set initial state.

<capsule-accordion-panel open> ... </capsule-accordion-panel>

capsule-accordion-trigger

The clickable header that toggles the panel.

Attribute	Type	Default	Description
exclude-self	boolean	false	Disables toggle when clicking the trigger element itself

When exclude-self is set, the trigger only responds to clicks on its children (e.g., buttons, icons), not on the empty space. This is useful when you have interactive elements inside the trigger.

<capsule-accordion-trigger exclude-self>
  <capsule-button>Edit</capsule-button>
</capsule-accordion-trigger>

capsule-accordion-content

The collapsible content area.

<capsule-accordion-content> Panel content here </capsule-accordion-content>

Attributes

Attribute	Type	Default	Description
type	string	single	Accordion behavior (single or multiple)
collapsible	boolean	false	Allow closing all panels, including the first

Type Values

• single — Only one panel can be open at a time (default)
• multiple — Multiple panels can be open simultaneously

Accessibility

• ✅ ARIA roles (role="region", role="button")
• ✅ Keyboard navigation support
• ✅ Proper focus management
• ✅ Semantic structure for screen readers