Collapsible – Automattic Design System

Groups all parts of the collapsible.

Collapsible is a collection of React components that combine to render a collapsible panel controlled by a button.

Import

import { Collapsible } from '@wordpress/ui';

Props

Name	Type	Description
`className`	`string`	CSS class name to apply to the element.
`style`	`React.CSSProperties`	CSS style to apply to the element.
`render`	`\| ComponentRenderFn< HTMLAttributesWithRef > \| React.ReactElement< Record< string, unknown > >`	Replaces the component’s default HTML element using a given React element, or a function that returns a React element.
`children`	`ReactNode`	The content to be rendered inside the component.

Examples

Default

const Default = () => <Collapsible.Root>(<>
        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
        <Collapsible.Panel>
            <p>Collapsible content here.</p>
        </Collapsible.Panel>
    </>)</Collapsible.Root>;

Default Open

const DefaultOpen = () => <Collapsible.Root defaultOpen>(<>
        <Collapsible.Trigger>Toggle</Collapsible.Trigger>
        <Collapsible.Panel>
            <p>This panel is open by default.</p>
        </Collapsible.Panel>
    </>)</Collapsible.Root>;

Disabled

const Disabled = () => <Collapsible.Root disabled>(<>
        <Collapsible.Trigger>Toggle (disabled)</Collapsible.Trigger>
        <Collapsible.Panel>
            <p>This content cannot be toggled.</p>
        </Collapsible.Panel>
    </>)</Collapsible.Root>;

Hidden Until Found

When hiddenUntilFound is set on Collapsible.Panel, the collapsed content remains in the DOM using the hidden="until-found" HTML attribute instead of being removed entirely. This lets the browser’s native page search (Ctrl/Cmd+F) find text inside collapsed panels and automatically expand them to reveal the match — improving discoverability without sacrificing the collapsed layout.

const HiddenUntilFound = function HiddenUntilFound() {
    return (
        <div>
            <p>
                Use the browser&apos;s find-in-page (Ctrl/Cmd+F) to search
                for "hidden treasure". The collapsed panel will
                automatically expand to reveal the match.
            </p>
            <Collapsible.Root>
                <Collapsible.Trigger>Expand to reveal</Collapsible.Trigger>
                <Collapsible.Panel hiddenUntilFound>
                    <p>
                        This is the hidden treasure that can be found via
                        the browser&apos;s built-in page search even while
                        the panel is collapsed.
                    </p>
                </Collapsible.Panel>
            </Collapsible.Root>
        </div>
    );
};

Controlled

const Controlled = function Controlled() {
    const [ open, setOpen ] = useState( false );
    return (
        <Collapsible.Root open={ open } onOpenChange={ setOpen }>
            <Collapsible.Trigger>
                { open ? 'Close' : 'Open' }
            </Collapsible.Trigger>
            <Collapsible.Panel>
                <p>Controlled collapsible panel.</p>
            </Collapsible.Panel>
        </Collapsible.Root>
    );
};