Collapsible

A programmatically controlled expand/collapse section — composed from details and button. No new patch needed.

How it works

The HTML <details> element handles open/close natively. The details patch adds animation and styling. To control it programmatically (without clicking the summary), bind the open attribute reactively to a toState value. Clicking any external button toggles the state.

PatternUsage
details patchAnimated expand/collapse with styling
Reactive attributeopen: (listener) => state.get(listener)
External triggerAny button can toggle open state