# Collapse

- Page: https://jiguang132.com/resources/arco-design/docs/collapse
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

The content area that can be collapsed/expanded.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: Collapse is used to group and hide complex content areas. You can decide which panels to be expanded.
- **Accordion**: Render as Accordion.
- **Nested Panels**: Nested panels.
- **Borderless Panel**: Pass in `bordered=false` to use simple style without borders.
- **Custom Panel Style**: Use `style` to customize style of panel.
- **Extra Node**: The extra node on the far right can be set by `extra`.
- **Position of IconExpand**: The position of the `expandIcon` can be set through `expandIconPosition`.
- **Lazyload**: Whether to render `children` until the first expansion of `Collapse.Item`.
- **Destroy On Hide**: The collapsed panel can be destroyed through the `destroyOnHide` property.
- **Specify Folding Trigger Area**: Through the `triggerRegion`, set the region that can trigger collapsing.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Collapse

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|accordion|Whether to render as Accordion|boolean |`-`|-|
|bordered|Whether to render border|boolean |`true`|-|
|destroyOnHide|If true, panels will be unmounted on collapsing|boolean |`-`|-|
|lazyload|If true, invisible panels will not be rendered on mount|boolean |`true`|-|
|expandIconPosition|Position of collapse icon|'left' \| 'right' |`left`|-|
|triggerRegion|The area that can trigger the collapse operation|'header' \| 'icon' |`-`|2.41.0|
|expandIcon|Custom collapse icon|ReactNode |`-`|-|
|activeKey|Key of the active panel|string \| string[] |`-`|-|
|className|Additional css class|string \| string[] |`-`|-|
|defaultActiveKey|Key of the default active panel|string \| string[] |`-`|-|
|style|Additional style|CSSProperties |`-`|-|
|onChange|Callback when the active panel changes|(key: string, keys: string[], e) => void |`-`|-|

### Collapse.Item

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|destroyOnHide|If true, item will be unmounted on collapsing. (Higher priority than `Collapse.destroyOnHide`)|boolean |`-`|-|
|disabled|If true, the panel is not collapsible|boolean |`-`|-|
|showExpandIcon|Whether to show expand icon|boolean |`true`|-|
|name|Unique identifier key of the current panel item|string  **(Required)**|`-`|-|
|expandIcon|Custom expand icon|ReactNode |`-`|-|
|extra|The extra element in the corner|ReactNode |`-`|-|
|header|Header content|ReactNode |`-`|-|
|className|Additional css class|string \| string[] |`-`|-|
|contentStyle|Additional styles of the content area.|CSSProperties |`-`|2.15.0|
|style|Additional style|CSSProperties |`-`|-|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt