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	-