Docs / Components / Collapse

Collapse

Toggle the visibility of content with a smooth height (or width) transition. Drive it with a single show prop, or use the useCollapse hook to wire the trigger and region together with the correct ARIA attributes.

Import

import { Collapse, useCollapse } from '@metatoy/bootstrap-styled';

Vertical

Collapse animates its height between collapsed and expanded whenever show changes — 0.35s ease, matching Bootstrap. Own the boolean in your own state and toggle it from any control. Set aria-expanded on the trigger and link it to the region with aria-controls / id.

Horizontal

Add horizontal to collapse along the inline (width) axis instead — Bootstrap’s .collapse-horizontal. Give the collapsing child a fixed width so the transition has a target to animate to.

The useCollapse hook

useCollapse manages the open state and hands back spread-ready prop bundles so the trigger and region stay wired and accessible without manual aria-* bookkeeping:

const { open, toggleProps, collapseProps } = useCollapse();

return (
<>
  <button {...toggleProps}>{open ? 'Hide' : 'Show'}</button>
  <Collapse {...collapseProps}>
    <div className="panel">…</div>
  </Collapse>
</>
);

It accepts { defaultOpen, open, id, onToggle } (controlled or uncontrolled) and returns { open, setOpen, toggle, toggleProps, collapseProps }. toggleProps supplies aria-expanded, aria-controls, and onClick; collapseProps supplies the matching id and show.

Props

Collapse also accepts all native <div> attributes (id, className, style, …).

Theming

Collapse is a transition primitive — it has no color tokens of its own. It animates height/width and respects whatever surface, border, and radius tokens (--bs-border-color, --bs-border-radius, …) you apply to its content.

Accessibility

Collapse controls the visibility of a region; the triggering control must carry aria-expanded (reflecting the open state) and aria-controls pointing at the region’s id. The useCollapse hook sets these for you. Because collapsed content is still in the DOM, keep interactive elements inside a collapsed panel out of the tab order if the panel is hidden, or rely on the hook’s wiring.

Explore in Ladle

Open in Ladle ↗