Collapse - Ant Design

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.

tsx

// works when >= 5.6.0, recommended ✅
const text = `
  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.
`;

const items: CollapseProps['items'] = [
  {
    key: '1',
    label: 'This is panel header 1',
    children: <p>{text}</p>,
  },
  {
    key: '2',
    label: 'This is panel header 2',
    children: <p>{text}</p>,
  },
  {
    key: '3',
    label: 'This is panel header 3',
    children: <p>{text}</p>,
  },
];

<Collapse items={items} defaultActiveKey={['1']} />;

// works when <5.6.0 , deprecated when >=5.6.0  🙅🏻‍♀️

<Collapse defaultActiveKey={['1']} onChange={onChange}>
  <Panel header="This is panel header 1" key="1">
    <p>{text}</p>
  </Panel>
  <Panel header="This is panel header 2" key="2">
    <p>{text}</p>
  </Panel>
  <Panel header="This is panel header 3" key="3">
    <p>{text}</p>
  </Panel>
</Collapse>;

Examples

API

Common props ref：Common props

Collapse

Property	Description	Type	Default	Version
accordion	If true, Collapse renders as Accordion	boolean	false
activeKey	Key of the active panel	string[] \| string 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 number[] \| number	-
~~destroyInactivePanel~~	Destroy Inactive Panel	boolean	false
destroyOnHidden	Destroy Inactive Panel	boolean	false	5.25.0
expandIcon	Allow to customize collapse 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` \| `middle` \| `small`	`middle`	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

Deprecated

When using version >= 5.6.0, we prefer to configuring the panel by items.

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

Semantic DOM

Design Token

Component TokenHow to use?

Token Name	Description	Type	Default Value
borderlessContentBg	Background of content in borderless style	string	transparent
borderlessContentPadding	Padding of content in borderless style	Padding<string \| number> \| undefined	4px 16px 16px
contentBg	Background of content	string	#ffffff
contentPadding	Padding of content	Padding<string \| number> \| undefined	16px 16px
headerBg	Background of header	string	rgba(0,0,0,0.02)
headerPadding	Padding of header	Padding<string \| number> \| undefined	12px 16px

Global TokenHow to use?