Motion Collapsible Content

Overview

Motion Collapsible Content smoothly expands and collapses a region of content, animating both its height and opacity. It animates to the content’s natural height, so content that changes size is always shown in full, and content that is open when the page loads does not grow into place.

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