Chapter 14: Collapsible

Core Idea

A single interactive panel that expands/collapses — the minimal building block Accordion generalizes into multiple coordinated items.

Key Concepts

• Anatomy: Root → Trigger + Content.
• --radix-collapsible-content-width/-height: same CSS-variable pattern as Accordion's content, used to animate real height instead of max-height hacks.
• disabled: available directly on Root, unlike Accordion where it lives on Item.

Code Examples

.CollapsibleContent[data-state="open"] { animation: slideDown 300ms ease-out; }
.CollapsibleContent[data-state="closed"] { animation: slideUp 300ms ease-out; }
@keyframes slideDown { from { height: 0; } to { height: var(--radix-collapsible-content-height); } }

• What it demonstrates: animating a single collapsible panel's real content height via the exposed CSS variable.

Key Takeaways

1. Reach for Collapsible instead of Accordion when you have exactly one independent panel — no Item/value coordination needed.
2. Follows the Disclosure WAI-ARIA pattern; Space/Enter toggle when the trigger is focused.
3. The content-size CSS variables are identical in name pattern to Accordion's — same technique applies.

Connects To

• Accordion: the multi-item, coordinated version of this same open/closed pattern.