> For the complete documentation index, see [llms.txt](https://tophivetheme.gitbook.io/vurox/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tophivetheme.gitbook.io/vurox/components/collapse.md).

# Collapse

```jsx
import { Collapse } from 'antd'
```

```jsx
<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 <a href="#api" id="api"></a>

#### Collapse <a href="#collapse" id="collapse"></a>

| 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 <a href="#collapse.panel" id="collapse.panel"></a>

| 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         | -       |         |