> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt.

# Accordion

> Add expandable Accordion sections to your Fern documentation. Perfect for FAQs, settings panels, and progressive content disclosure.

The `<Accordion>` component creates expandable sections with searchable, SEO-friendly content that remains accessible even when collapsed. Use accordions for FAQs, documentation sections, settings panels, or any content where progressive disclosure improves readability.

You can use single accordions or group multiple accordions together with `<AccordionGroup>`.

## Usage

#### Section 1

Content for section 1, expanded by default

#### Section 2

Content for section 2

```jsx Markdown
<AccordionGroup>
  <Accordion title="Section 1" defaultOpen={true}>
    Content for section 1, expanded by default
  </Accordion>
  <Accordion title="Section 2">
    Content for section 2
  </Accordion>
</AccordionGroup>
```

## Variants

Within each accordion, you can embed images, videos, and other components (callouts, code blocks, etc) within accordions for rich interactive content.

### Multimedia

#### Text content with multimedia

<img src="https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg" alt="A sample image" />

```jsx Markdown
<Accordion title="Text content with multimedia">
<Frame caption="Sample image">
  <img src="https://images.pexels.com/photos/1867601/pexels-photo-1867601.jpeg" alt="A sample image" />
</Frame>
</Accordion>
```

### Nested components

#### Nested components

Here's a callout nested in an accordion

```jsx Markdown
<Accordion title="Nested components">
<Note>
  Here's a callout nested in an accordion
</Note>
</Accordion>
```

### Default open

#### Accordion open by default

Use the `defaultOpen` property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content.

```jsx Markdown
<Accordion title='Accordion open by default' defaultOpen={true}>
  Use the `defaultOpen` property to have specific accordions expanded by default when the page loads. This is useful for highlighting important information or frequently accessed content.
</Accordion>
```

## Properties

**`title`** `string` — required

The title shown in the accordion header

---

**`children`** `string | JSX` — required

The content to be displayed when the accordion is expanded. Can include text, markdown, and components.

---

**`defaultOpen`** `boolean`

Whether the accordion should be open when the page loads. If not specified, the accordion will be collapsed by default.

---

**`id`** `string`

The unique ID for the accordion. Used for linking and navigation. If not specified, an ID will be generated automatically.

---

**`className`** `string`

Additional CSS classes to apply to the accordion

---