Motion Collapsible Content

Overview

Motion Collapsible Content smoothly expands and collapses a region of content, animating both its height and opacity. It measures its children (and re-measures them as they change) so the open animation always transitions to the correct height, even for dynamic content.

Its open state is fully controlled through the isOpen prop — pair it with your own trigger (such as a Button) that toggles the state. Use it for show/more panels, expandable rows, and inline disclosure sections. It is built on Motion, so the animation respects the transition timing defined by the component.

Usage

Import the component:

import { MotionCollapsibleContent } from "@eqtylab/equality";

Drive isOpen from state and toggle it with a trigger:

const [isOpen, setIsOpen] = useState(false);

<Button onClick={() => setIsOpen((open) => !open)}>Toggle</Button>
<MotionCollapsibleContent isOpen={isOpen}>
  <p>Content revealed when open.</p>
</MotionCollapsibleContent>;

Default

Props