# Collapse

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/collapse
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

A content area that can be collapsed/expanded.

## Install

```bash
npm install antd-mobile@5.43.0
```

antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register `createRoot` with `unstableSetRender` at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with `<html data-prefers-color-scheme="dark">`.

Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as `DemoBlock` are JGuang rewrites, not antd-mobile APIs.

A content area that can be collapsed/expanded.

## When to Use

- Group and hide complex areas to keep pages tidy.
- An accordion is a special type of accordion panel that only allows a single content area to expand.

## Demos

## Collapse

### Props

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| accordion | Whether to enable accordion mode | `boolean` | `false` |
| activeKey | The `key` of the currently expanded panel | accordion mode: `string \| null` <br/>non-accordion mode: `string[]` | - |
| arrowIcon | Custom arrow icon. if you pass a ReactNode, antd-mobile will add a rotate animation for you. | `React.ReactNode \| ((active: boolean) => React.ReactNode)` | - |
| defaultActiveKey | The `key` of the expanded panel by default | accordion mode: `string \| null` <br/>non-accordion mode: `string[]` | - |
| onChange | Triggered when the panel is switched | accordion mode: `(activeKey: string \| null) => void` <br /> non-accordion mode: `(activeKey: string[]) => void` | - |

## Collapse.Panel

### Props

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| arrowIcon | Custom arrow icon | `React.ReactNode \| ((active: boolean) => React.ReactNode)` | - |
| destroyOnClose | Destroy `dom` when not visible | `boolean` | `false` |
| disabled | Whether disabled or not | `boolean` | `false` |
| forceRender | Whether to render the `DOM` structure when hidden | `boolean` | `false` |
| key | The unique identifier | `string` | - |
| onClick | The click event of title bar | `(event: React.MouseEvent<Element, MouseEvent>) => void` | - |
| title | The content on the left side of the title bar | `ReactNode` | - |

---

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