/// Layout

Collapse

A single animated collapsible region, opened via open/defaultOpen, with an animated height and reduced-motion support.

import { Collapse } from "@protocore/pds";

View as Markdown

Basics

Collapse shows or hides a region with an animated height, driven by the open prop. Pair it with your own trigger — a button, a row header — that toggles the state you pass in.

Keep mounted

By default the region is removed from the DOM once collapsed. Set unmountOnExit={false} to keep it mounted (just hidden) so its content stays available to find-in-page and the accessibility tree.

Region visible

This paragraph stays in the DOM even while collapsed, so browser find-in-page and assistive tech can still reach the text: eu-central-1 relay settling in a single hop.

Collapse vs Accordion

Collapse is the single-region primitive: one block of content that expands and collapses under your control. Accordion generalizes it into a set of mutually-aware disclosure rows with built-in triggers and single/multiple modes. Use Collapse when you own the trigger and just need one region to animate — a 'show more' block, an inline detail panel, an advanced-settings drawer. The height animates off the region's natural size and honors the reader's reduced-motion preference automatically.

Usage

Pair Collapse with a button trigger that toggles the open state you pass in.
Use `unmountOnExit={false}` when the hidden content must stay findable in search.
Use Accordion for several coordinated disclosure rows.

Don't

Animate a fixed-height region — Collapse measures the content's natural height.
Use Collapse for a set of exclusive panels — that is Accordion.
Omit `aria-expanded` / `aria-controls` on your own trigger (see a11y).

Accessibility

Collapse renders only the region; provide your own trigger and link them with `aria-expanded` and `aria-controls` pointing at the region's `id`.
When collapsed and unmounted, the content leaves the accessibility tree; use unmountOnExit={false} if it must remain discoverable.
The height animation is neutralized under prefers-reduced-motion by the global motion policy.

`Collapse` props

Prop	Type	Default	Description
`children`	`ReactNode`	—	Region contents.
`className`	`string`	—
`defaultOpen`	`boolean`	`false`	Uncontrolled initial open state.
`onOpenChange`	`((open: boolean) => void)`	—	Fires when the open state changes.
`open`	`boolean`	—	Controlled open state.
`style`	`CSSProperties`	—
`unmountOnExit`	`boolean`	`true`	Remove the region from the DOM once its collapse animation finishes. When `false` the content stays mounted (just visually hidden) so it remains available to find-in-page and the accessibility tree.