logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Collapse

A content area which can be collapsed and expanded.
Importimport { Collapse } from "antd";
Sourcecomponents/collapse
Docs
Edit this pageChangelog

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

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

PropertyDescriptionTypeDefaultVersion
accordionIf true, Collapse renders as Accordionbooleanfalse
activeKeyKey of the active panelstring[] | string
number[] | number
No default value. In accordion mode, it's the key of the first panel
borderedToggles rendering of the border around the collapse blockbooleantrue
collapsibleSpecify how to trigger Collapse. Either by clicking icon or by clicking any area in header or disable collapse functionality itselfheader | icon | disabled-4.9.0
defaultActiveKeyKey of the initial active panelstring[] | string
number[] | number
-
destroyInactivePanelDestroy Inactive Panelbooleanfalse
destroyOnHiddenDestroy Inactive Panelbooleanfalse5.25.0
expandIconAllow to customize collapse icon(panelProps) => ReactNode-
expandIconPositionSet expand icon positionstart | end-4.21.0
ghostMake the collapse borderless and its background transparentbooleanfalse4.4.0
sizeSet the size of collapselarge | middle | smallmiddle5.2.0
onChangeCallback function executed when active panel is changedfunction-
itemscollapse items contentItemType-5.6.0

ItemType

PropertyDescriptionTypeDefaultVersion
classNamesSemantic structure classNameRecord<header | body, string>-5.21.0
collapsibleSpecify whether the panel be collapsible or the trigger area of collapsibleheader | icon | disabled-
childrenBody area contentReactNode-
extraThe extra element in the cornerReactNode-
forceRenderForced render of content on panel, instead of lazy rendering after clicking on headerbooleanfalse
keyUnique key identifying the panel from among its siblingsstring | number-
labelTitle of the panelReactNode--
showArrowIf false, panel will not show arrow icon. If false, collapsible can't be set as iconbooleantrue
stylesSemantic DOM styleRecord<header | body, CSSProperties>-5.21.0

Collapse.Panel

Deprecated

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

PropertyDescriptionTypeDefaultVersion
collapsibleSpecify whether the panel be collapsible or the trigger area of collapsibleheader | icon | disabled-4.9.0 (icon: 4.24.0)
extraThe extra element in the cornerReactNode-
forceRenderForced render of content on panel, instead of lazy rendering after clicking on headerbooleanfalse
headerTitle of the panelReactNode-
keyUnique key identifying the panel from among its siblingsstring | number-
showArrowIf false, panel will not show arrow icon. If false, collapsible can't be set as iconbooleantrue

Semantic DOM

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
borderlessContentBgBackground of content in borderless stylestringtransparent
borderlessContentPaddingPadding of content in borderless styleundefined | Padding<string | number>4px 16px 16px
contentBgBackground of contentstring#ffffff
contentPaddingPadding of contentundefined | Padding<string | number>16px 16px
headerBgBackground of headerstringrgba(0,0,0,0.02)
headerPaddingPadding of headerundefined | Padding<string | number>12px 16px
Global TokenHow to use?
Collapse

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Size

Ant Design 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 size.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Accordion

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Nested panel

Collapse is nested inside the Collapse.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Borderless

A borderless style of Collapse.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Custom Panel

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
No arrow

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Extra node

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Ghost Collapse

Making collapse's background to transparent.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Collapsible

Specify the trigger area of collapsible by collapsible.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
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
This is panel header 3
Default Size
This is default size panel header
Small Size
This is small size panel header
Large Size
This is large size panel header
This is panel header 1
This is panel header 2
This is panel header 3
This is panel header 1
This is panel header 2
This is panel header 3
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
This is panel header 3
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
This is panel header 3
This is panel header with 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.

This is panel header with no arrow icon
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
This is panel header 3

Expand Icon Position:
start
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
This is panel header 3
This panel can only be collapsed by clicking 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.

This panel can only be collapsed by clicking 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.

This panel can't be collapsed
This is panel header

This is panel body

  • header
    5.21.0
    Header element
  • body
    5.21.0
    Body element