Collapse

import { Collapse } from 'antd'
<Collapse defaultActiveKey={['2']}>
<Panel header="This is panel header 1" key="1">
<p>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.</p>
</Panel>
<Panel header="This is panel header 2" key="2">
<p>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.</p>
</Panel>
<Panel header="This is panel header 3" key="3" disabled>
<p>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.</p>
</Panel>
</Collapse>

API

Collapse

Property

Description

Type

Default

Version

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

Collapse.Panel

Property

Description

Type

Default

Version

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

extra element in the corner

ReactNode

-