Accordion

Expandable content sections with accessible keyboard navigation.

Usage

<w-accordion value="item1">
  <w-slot item name="item1">
    <w-slot trigger><button>Section 1</button></w-slot>
    <w-slot body>
      <div>Content for section 1</div>
    </w-slot>
  </w-slot>

  <w-slot item name="item2">
    <w-slot trigger><button>Section 2</button></w-slot>
    <w-slot body>
      <div>Content for section 2</div>
    </w-slot>
  </w-slot>
</w-accordion>

Props

Prop	Type	Default	Description
value	string	""	Expanded item name(s), comma-separated for multiple
multiple	boolean	false	Allow multiple items to be expanded
collapsible	boolean	true	Allow all items to be collapsed

Slots

Slot	Element	Description
item	Container	Wrapper for each accordion item (requires name attribute)
trigger	Button	Clickable header that toggles the item
content	Any	Collapsible content area

Events

Event	Detail	Description
change	{ value, expanded, toggled, isExpanded }	Fired when an item is toggled

Methods

Method	Description
expand(name)	Expand a specific item
collapse(name)	Collapse a specific item
expandAll()	Expand all items (requires multiple)
collapseAll()	Collapse all items (requires collapsible)

Keyboard

Key	Action
Enter / Space	Toggle focused item
ArrowDown	Focus next trigger
ArrowUp	Focus previous trigger
Home	Focus first trigger
End	Focus last trigger

Examples

Multiple Selection

<w-accordion multiple value="item1,item2">
  <!-- Multiple items can be open -->
</w-accordion>

Non-Collapsible

<w-accordion collapsible="false" value="item1">
  <!-- At least one item always open -->
</w-accordion>

Styling

Accordion items expose state via standard ARIA on the trigger and [hidden] on the body. See Styling for the full pattern.

/* Each item, trigger, and body */
w-accordion w-slot[item] > * {
  /* item wrapper */
}
w-accordion w-slot[trigger] > * {
  /* clickable header */
}
w-accordion w-slot[body] > * {
  /* expandable region */
}

/* Open state — `aria-expanded="true"` is set on the trigger */
w-accordion w-slot[trigger] > *[aria-expanded="true"] {
  background: #eef2ff;
}

/* The collapsed body is hidden via the [hidden] attribute, so it's
   already invisible. Style the visible body if you need to: */
w-accordion w-slot[body] > *:not([hidden]) {
  border-top: 1px solid #e5e7eb;
}

Selector	Targets
w-accordion w-slot[trigger] > *[aria-expanded="true"]	Open section's trigger
w-accordion w-slot[trigger] > *[aria-expanded="false"]	Closed section's trigger
w-accordion w-slot[body] > *[hidden]	Currently-collapsed body
w-accordion[multiple]	When multiple panels can be open

Accessibility

• Uses aria-expanded on triggers
• Uses aria-controls to link triggers to content
• Content regions have aria-labelledby pointing to trigger
• Full keyboard navigation support