Chapter 18: Collapsible

Core Idea

A single-panel open/close primitive — the two-part building block Accordion is built from, minus the multi-item/single-open-at-a-time orchestration.

Key Concepts

• Anatomy: Root → Trigger, Panel.
• Animation hooks: Panel exposes [data-starting-style]/[data-ending-style] for height transitions, same convention as Accordion's Panel (ch011) — expect a --collapsible-panel-height -style CSS variable analogous to Accordion's, sized to the content.
• hiddenUntilFound: lets browser in-page search (Ctrl/Cmd+F) find and auto-expand collapsed content; overrides keepMounted and uses native hidden="until-found" instead of removing the panel from the DOM.

Reference Tables

Part	Notable props	Notable data attributes
Root	open/defaultOpen/onOpenChange, disabled	data-open, data-closed, data-starting-style, data-ending-style
Trigger	nativeButton	data-panel-open
Panel	hiddenUntilFound, keepMounted	data-open, data-closed, data-starting-style, data-ending-style

Key Takeaways

1. Reach for Collapsible directly (not a 1-item Accordion) for any single show/hide panel — a "read more" toggle, an inline filter drawer, a details section.
2. Use hiddenUntilFound for content that should be discoverable by the browser's native page search even while collapsed, e.g. FAQ-style content.

Connects To

• ch011 (Accordion): multi-item orchestration built on this same Trigger/Panel open-animation contract.
• ch006 (Animation): the data-starting-style/data-ending-style height-transition pattern applies identically here.