Search
Collapse

A content area which can be collapsed and expanded.

Collapse

When to use

When there is a group of content on the same level.
When there is insufficient content space, it can be used to save space in the form of a revolving door.
Commonly used for a group of pictures/cards.


Collapse

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

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

This is panel header 2

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

Accordion

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

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

Nested panel

Collapse is nested inside the Collapse.
This is panel header 1
This is panel nest panel

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

Borderless

A borderless style of Collapse.
This is panel header 1

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

Custom Panel

Customize the background, border, margin styles and icon for each panel.
This is panel header 1

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

No arrow

You can hide the arrow icon by passing showArrow= to CollapsePanel component.
This is panel header with no arrow icon

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

Extra node

More than one panel can be expanded at a time, the first panel is initialized to be active in this case.
This is panel header 1
A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

Expand Icon Position:
left

Ghost Collapse

Making collapse's background to transparent.
This is panel header 1

A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.

API

Collapse
PropertyDescriptionTypeDefault
activeKey
Key of the active panel
string[] | string number[] | number
No default value. In accordion mode, it`s the key of the first panel
defaultActiveKey
Key of the initial active panel
string[] | string number[] | number
-
bordered
Toggles rendering of the border around the collapse block
boolean
true
accordion
If true, Collapse renders as Accordion
boolean
false
onChange
Callback function executed when active panel is changed
function
-
expandIcon
Allow to customize collapse icon
(panelProps) => ReactNode
-
expandIconPosition
Set expand icon position
left | right
-
destroyInactivePanel
Destroy Inactive Panel
boolean
false
ghost
Make the collapse borderless and its background transparent
boolean
false
Collapse.Panel
PropertyDescriptionTypeDefault
disabled
If true, panel cannot be opened or closed
boolean
false
forceRender
Forced render of content on panel, instead of lazy rending after clicking on header
boolean
false
header
Title of the panel
string | ReactNode
-
key
Unique key identifying the panel from among its siblings
string | number
-
showArrow
If false, panel will not show arrow icon
boolean
true
extra
The extra element in the corner
ReactNode
-