Collapse

A content area which can be collapsed and expanded.

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.

Examples

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.

More than one panel can be expanded at a time, the first panel is initialized to be active in this case.

import { Collapse } from 'antd';
const Panel = Collapse.Panel;

function callback(key) {
  console.log(key);
}

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.
`;

ReactDOM.render(
  <Collapse defaultActiveKey={['1']} onChange={callback}>
    <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" disabled>
      <p>{text}</p>
    </Panel>
  </Collapse>
, mountNode);

Accordion mode, only one panel can be expanded at a time. The first panel will be expanded by default.

import { Collapse } from 'antd';
const Panel = Collapse.Panel;

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.
`;

ReactDOM.render(
  <Collapse accordion>
    <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>
, mountNode);

Collapse is nested inside the Collapse.

import { Collapse } from 'antd';
const Panel = Collapse.Panel;

function callback(key) {
  console.log(key);
}

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.
`;

ReactDOM.render(
  <Collapse onChange={callback}>
    <Panel header={'This is panel header 1'} key="1">
      <Collapse defaultActiveKey="1">
        <Panel header={'This is panel nest panel'} key="1">
          <p>{text}</p>
        </Panel>
      </Collapse>
    </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>
, mountNode);

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.

A borderless style of Collapse.

import { Collapse } from 'antd';
const Panel = Collapse.Panel;

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.
`;

ReactDOM.render(
  <Collapse bordered={false} defaultActiveKey={['1']}>
    <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>
, mountNode);

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.

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

import { Collapse } from 'antd';
const Panel = Collapse.Panel;

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 customPanelStyle = {
  background: '#f7f7f7',
  borderRadius: 4,
  marginBottom: 24,
  border: 0,
};

ReactDOM.render(
  <Collapse bordered={false} defaultActiveKey={['1']}>
    <Panel header="This is panel header 1" key="1" style={customPanelStyle}>
      <p>{text}</p>
    </Panel>
    <Panel header="This is panel header 2" key="2" style={customPanelStyle}>
      <p>{text}</p>
    </Panel>
    <Panel header="This is panel header 3" key="3" style={customPanelStyle}>
      <p>{text}</p>
    </Panel>
  </Collapse>
, mountNode);

API#

Collapse#

PropertyDescriptionTypeDefault
activeKeykey of the active panelstring[]|stringNo default value. In accordion mode, it's the key of the first panel.
defaultActiveKeykey of the initialized active panelstring-
onChangea callback function, which can be executed when you switch the panelsFunction-

Collapse.Panel#

PropertyDescriptionTypeDefault
keycorresponds to the activeKeystring-
headertitle of the panelstring|ReactNode-
disabledusers cannot change opening status of a disabled panelbooleanfalse