Accordion

Collapsible sections from an items array; one or multiple panels open (allow_multiple).

HTML tag: c-ef6ddd1948cd74ecfa8957659526a2fc2

When to use

• expand/collapse FAQ or settings sections
• stacked disclosure panels
• show one or many open sections

Props

Prop	Type	Default	Description
items	Array
active_item_id	String	“
allow_multiple	Boolean	false
fit_to_parent	Boolean	false
density	String	comfortable
appearance	String	ghost
tone	String	neutral
size	String	md

Rules

• Pass .items with panel metadata; slotted content per item in default slot.
• Control open state via active_item_id or methods openItem/closeItem/getState.
• Listen to accordion-toggle for open_ids changes.
• Not for primary page navigation — use ab-tabs or ab-nav.

Events

Event	Detail
accordion-toggle	item_id: String, active_item_id: String

Methods

Signature	Description
openItem(id: String)
closeItem(id: String)
getState()

What to avoid

Do not use for tabbed views (ab-tabs). Do not use as modal (ab-dialog).

Example

<c-ef6ddd1948cd74ecfa8957659526a2fc2 .items=${sections} .allow_multiple=${false} @accordion-toggle=${onToggle}></c-ef6ddd1948cd74ecfa8957659526a2fc2>