# 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

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

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

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

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

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

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

### Default open

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

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

<ParamField path="title" type="string" required={true}>
  The title shown in the accordion header
</ParamField>

<ParamField path="children" type="string | JSX" required={true}>
  The content to be displayed when the accordion is expanded. Can include text, markdown, and components.
</ParamField>

<ParamField path="defaultOpen" type="boolean" default={false}>
  Whether the accordion should be open when the page loads. If not specified, the accordion will be collapsed by default.
</ParamField>

<ParamField path="id" type="string" required={false}>
  The unique ID for the accordion. Used for linking and navigation. If not specified, an ID will be generated automatically.
</ParamField>

<ParamField path="className" type="string" required={false}>
  Additional CSS classes to apply to the accordion
</ParamField>