Collapse

A content area which can be collapsed and expanded.

When to use

Can be used to group or hide complex regions to keep the page clean.
Accordion is a special kind of Collapse, which allows only one panel to be expanded at a time.

Examples

Collapse

By default, any number of panels can be expanded at a time. The first panel is expanded in this example.

Size

Ceebee UI supports a default collapse size as well as a large and small size. If a large or small collapse is desired, set the size property to either large or small respectively. Omit the size property for a collapse with the default medium size.

Accordion

In accordion mode, only one panel can be expanded at a time.

Nested panel

Collapse is nested inside the Collapse.

Borderless

A borderless style of Collapse.

Custom Panel

Customize the background, border, margin styles and icon for each panel.

Panel with icon

Add an icon to the panel title. A bare <svg> from a third-party icon library (e.g. lucide, react-icons) stays vertically centred with the title text.

No arrow

You can hide the arrow icon by passing showArrow={false} to CollapsePanel component.

Extra node

Render extra element in the top-right corner of each panel.

Ghost Collapse

Making collapse's background to transparent.

Collapsible

Specify the trigger area of collapsible by collapsible.

Custom semantic dom styling

You can customize the semantic dom style of Collapse by passing objects/functions through classNames and styles.

API

Collapse and Collapse.Panel are exported from @ceebee/ui/client.

Collapse

Property	Description	Type	Default	Version
`accordion`	If true, Collapse renders as Accordion	`boolean`	`false`	—
`activeKey`	Key of the active panel	`string\[] \| string <br/> number\[] \| number`	`No default value. In accordion mode, it's the key of the first panel`	—
`bordered`	Toggles rendering of the border around the collapse block	`boolean`	`true`	—
`classNames`	Customize class for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>`	`-`	—
`collapsible`	Specify how to trigger Collapse. Either by clicking icon or by clicking any area in header or disable collapse functionality itself	`header \| icon \| disabled`	`-`	4.9.0
`defaultActiveKey`	Key of the initial active panel	`string\[] \| string <br/> number\[] \| number`	`-`	—
`destroyInactivePanel`	Destroy Inactive Panel	`boolean`	`false`	—
`destroyOnHidden`	Destroy Inactive Panel	`boolean`	`false`	5.25.0
`expandIcon`	Customize the collapse expand icon	`(panelProps) => ReactNode`	`-`	—
`expandIconPlacement`	Set expand icon placement	`start \| end`	`start`	-
`expandIconPosition`	Set expand icon position, Please use expandIconPlacement instead	`start \| end`	`-`	4.21.0
`ghost`	Make the collapse borderless and its background transparent	`boolean`	`false`	4.4.0
`size`	Set the size of collapse	`large \| medium \| small`	`medium`	5.2.0
`styles`	Customize inline style for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>`	`-`	—
`onChange`	Callback function executed when active panel is changed	`function`	`-`	—
`items`	collapse items content	`ItemType`	`-`	5.6.0

ItemType

Property	Description	Type	Default	Version
`classNames`	Semantic structure className	`Record<header \| body, string>`	`-`	5.21.0
`collapsible`	Specify whether the panel be collapsible or the trigger area of collapsible	`header \| icon \| disabled`	`-`	—
`children`	Body area content	`ReactNode`	`-`	—
`extra`	The extra element in the corner	`ReactNode`	`-`	—
`forceRender`	Forced render of content on panel, instead of lazy rendering after clicking on header	`boolean`	`false`	—
`key`	Unique key identifying the panel from among its siblings	`string \| number`	`-`	—
`label`	Title of the panel	`ReactNode`	`-`	-
`showArrow`	If false, panel will not show arrow icon. If false, collapsible can't be set as icon	`boolean`	`true`	—
`styles`	Semantic DOM style	`Record<header \| body, CSSProperties>`	`-`	5.21.0

Collapse.Panel

Property	Description	Type	Default	Version
`collapsible`	Specify whether the panel be collapsible or the trigger area of collapsible	`header \| icon \| disabled`	`-`	4.9.0 (icon: 4.24.0)
`extra`	The extra element in the corner	`ReactNode`	`-`	—
`forceRender`	Forced render of content on panel, instead of lazy rendering after clicking on header	`boolean`	`false`	—
`header`	Title of the panel	`ReactNode`	`-`	—
`key`	Unique key identifying the panel from among its siblings	`string \| number`	`-`	—
`showArrow`	If false, panel will not show arrow icon. If false, collapsible can't be set as icon	`boolean`	`true`	—