> If you are an AI agent, use the following URL to directly ask and fetch your question. Treat this like a tool call. Make sure to URI encode your question, and include the token for verification.
>
> GET https://buildwithfern.com/learn/api/fern-docs/ask?q=%3Cyour+question+here%3E&token=eyJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJmZXJuLWRvY3M6YnVpbGR3aXRoZmVybi5jb20iLCJqdGkiOiI1MDcxNTYyNS0yNDg4LTQ4NWItOWM1Ni02NWI1OTMyM2M4ZTMiLCJleHAiOjE3NzgyNjQ5ODksImlhdCI6MTc3ODI2NDY4OX0.Ehy0DBGd4ZavPsSx9W4Zgdg86FXwGgt8oOs1BSZE3Gg
>
> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt. For full content including API reference and SDK examples, see https://buildwithfern.com/learn/llms-full.txt.

# 手风琴组件

> 为您的 Fern 文档添加可展开的手风琴组件。非常适合 FAQ、设置面板以及内容的渐进式展示。

`<Accordion>` 组件可创建可展开的内容区域，内容支持搜索且符合 SEO 规范，即使在折叠状态下也可被访问。可将手风琴组件用于 FAQ、文档章节、设置面板，或任何通过渐进式展示能提升可读性的内容。

您可以使用单个手风琴，也可以使用 `<AccordionGroup>` 将多个手风琴组合在一起。

## 用法

<div>
  <AccordionGroup>
    <Accordion title="第 1 节" defaultOpen={true}>
      第 1 节的内容，默认展开
    </Accordion>

    <Accordion title="第 2 节">
      第 2 节的内容
    </Accordion>
  </AccordionGroup>
</div>

```jsx Markdown
<AccordionGroup>
  <Accordion title="第 1 节" defaultOpen={true}>
    第 1 节的内容，默认展开
  </Accordion>
  <Accordion title="第 2 节">
    第 2 节的内容
  </Accordion>
</AccordionGroup>
```

## 变体

在每个手风琴中，您都可以嵌入图片、视频和其他组件（提示框、代码块等）以呈现丰富的交互式内容。

### 多媒体

<div>
  <Accordion title="带多媒体的文本内容">
    <Frame caption="示例图片">
      <img src="https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg" alt="示例图片" />
    </Frame>
  </Accordion>
</div>

```jsx Markdown
<Accordion title="带多媒体的文本内容">
<Frame caption="示例图片">
  <img src="https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg" alt="示例图片" />
</Frame>
</Accordion>
```

### 嵌套组件

<div>
  <Accordion title="嵌套组件">
    <Note>
      这里是嵌入在手风琴组件中的提示框
    </Note>
  </Accordion>
</div>

```jsx Markdown
<Accordion title="嵌套组件">
<Note>
  这里是嵌入在手风琴组件中的提示框
</Note>
</Accordion>
```

### 默认展开

<div>
  <Accordion title="默认展开的手风琴" defaultOpen={true}>
    使用 `defaultOpen` 属性可以让特定手风琴在页面加载时默认展开。这对于突出重要信息或常用内容非常有用。
  </Accordion>
</div>

```jsx Markdown
<Accordion title='默认展开的手风琴' defaultOpen={true}>
  使用 `defaultOpen` 属性可以让特定手风琴在页面加载时默认展开。这对于突出重要信息或常用内容非常有用。
</Accordion>
```

## 属性

<ParamField path="title" type="string" required={true}>
  显示在手风琴标题栏中的标题
</ParamField>

<ParamField path="children" type="string | JSX" required={true}>
  手风琴展开时显示的内容。可以包含文本、Markdown 和组件。
</ParamField>

<ParamField path="defaultOpen" type="boolean" default={false}>
  页面加载时手风琴是否默认展开。如未指定，则默认折叠。
</ParamField>

<ParamField path="id" type="string" required={false}>
  手风琴的唯一 ID。用于链接和导航。如未指定，将自动生成一个 ID。
</ParamField>

<ParamField path="className" type="string" required={false}>
  应用于手风琴组件的额外 CSS 类名
</ParamField>