Collapsible

Simple expand/collapse container.

Usage

<w-collapsible>
  <w-slot trigger><button>Toggle content</button></w-slot>
  <w-slot body>
    <div>Hidden content that can be expanded.</div>
  </w-slot>
</w-collapsible>

Props

Prop	Type	Default	Description
open	boolean	false	Whether content is visible

Slots

Slot	Element	Description
trigger	Button	Element that toggles visibility
content	Any	Collapsible content

Events

Event	Detail	Description
change	{ open }	Visibility changed

Methods

Method	Description
expand()	Show content
collapse()	Hide content
toggle()	Toggle visibility

Keyboard

Key	Action
Enter / Space	Toggle (on trigger)

Example

Default Open

<w-collapsible open>
  <w-slot trigger><button>Hide details</button></w-slot>
  <w-slot body><div>Visible by default</div></w-slot>
</w-collapsible>

Styling

w-collapsible w-slot[trigger] > * {
  /* clickable header */
}
w-collapsible w-slot[body] > * {
  /* expandable content */
}

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

Selector	Targets
w-collapsible w-slot[trigger] > *[aria-expanded="true"]	Open trigger
w-collapsible[open]	Host while open

Accessibility

• Trigger has aria-expanded and aria-controls
• Content linked via ID reference