Collapsible

An unstyled collapsible component for building expand/collapse interfaces with full control over layout and styling.

Build fully custom expand/collapse interfaces with complete control over layout and styling.

PrimeReact is a rich set of open source UI components for React. It provides a wide range of components like buttons, dialogs, tables, and more to help you build modern web applications.

basic-demo

Features#

Compound component API with sub-components: Root, Trigger, Content
Controlled and uncontrolled open state management
Imperative toggle, open, and close methods
Callback props: onOpen, onClose, onOpenChange

Usage#

import { Collapsible } from 'primereact/collapsible';

<Collapsible.Root>
    <Collapsible.Trigger></Collapsible.Trigger>
    <Collapsible.Content></Collapsible.Content>
</Collapsible.Root>

Behavior#

Motion Animation#

Pass motionProps to Root to animate the content element.

<Collapsible.Root motionProps={{ transition: { duration: 200 } }}>
    <Collapsible.Trigger></Collapsible.Trigger>
    <Collapsible.Content></Collapsible.Content>
</Collapsible.Root>

See Motion for animation phases, CSS variables, and hide strategies.

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element.

<Collapsible.Root as="section"></Collapsible.Root>
<Collapsible.Trigger as="div"></Collapsible.Trigger>

Default elements: Root=div, Trigger=button, Content=div.

Render Function Children#

Root accepts a render function as children, providing access to the component instance.

<Collapsible.Root>{(instance) => <span>{instance.state.open ? 'Open' : 'Closed'}</span>}</Collapsible.Root>

API#

CollapsibleRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: CollapsibleRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: CollapsibleRootInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`CollapsibleRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<CollapsibleRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: CollapsibleRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`open`	`boolean`	`false`
Controls the open state of the collapsible.
`defaultOpen`	`boolean`	`false`
Defines the initial open state of the collapsible.
`disabled`	`boolean`	`false`
When disabled, the component cannot be interacted with.
`tabIndex`	`number`	`0`
Index of the element in tabbing order.
`onOpen`	`(event?: SyntheticEvent) => void`	—
Callback triggered when the content is opened.
`onClose`	`(event?: SyntheticEvent) => void`	—
Callback triggered when the content is closed.
`onOpenChange`	`(event: useCollapsibleOpenChangeEvent) => void`	—
Callback triggered when the content's toggle state changes.
`lazy`	`boolean`	`false`
When enabled, hidden content are not rendered at all. Defaults to false that hides content with css.
`motionProps`	`MotionOptions`	—
Used to configure the motion of the collapsible content.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"collapsible"`
`data-part`	`"root"`
`data-open`	Present when open
`data-closed`	Present when closed
`data-disabled`	Present when disabled

CollapsibleTrigger#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: CollapsibleTriggerInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: CollapsibleTriggerInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`CollapsibleTriggerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<CollapsibleTriggerPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: CollapsibleTriggerInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"collapsible"`
`data-part`	`"trigger"`
`data-content-open`	Present when content open
`data-content-closed`	Present when content closed

CollapsibleContent#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: CollapsibleContentInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: CollapsibleContentInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`CollapsibleContentInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<CollapsibleContentPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: CollapsibleContentInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"collapsible"`
`data-part`	`"content"`
`data-open`	Present when open
`data-closed`	Present when closed

Accessibility#

The trigger has aria-expanded reflecting the open state and aria-controls referencing the content element's id. The content has role="region" and aria-hidden when collapsed.

Keyboard Support#

Key	Function
`tab`	Moves focus to the trigger element.
`enter`	Toggles the collapsible content open or closed.
`space`	Toggles the collapsible content open or closed.