Make room for more
Independent panelsOpen any combination. The first panel starts open.
One thing at a time
AccordionTake another route
External controls + URL hashThe buttons and link control the same panels. Open a permalink to start with that destination selected.
A layer deeper
Nested panelsInner panels keep their own state when the outer panel closes.
Two reveals. One action.
Multiple controls + content areasWeekend field notes
Leave before sunrise. Follow the old trail to the lookout and take the longer way home.
A light jacket, a paper map, water, and something good to share at the top.
Change the gesture
Custom event + selectors + classesA different gesture, the same reveal. This panel has its own controls, content selectors, and state classes.
Double-click or double-tap the heading. Keyboard: focus the heading and press Enter or Space.
Adapt to the space
Media queriesOn wide screens, this content stays visible. At 760px and below, the heading becomes a toggle. It starts open from 540–760px and closed below 540px.
Resize the window to switch between static content and a collapsible panel.
Behind every interaction
Actions + lifecycle events- Interact with the panel to see its events.
Destroy restores static content. Reinitialize brings the interaction back. Actions send a custom payload to the event feed.