# Accordion and AccordionGroup

<AccordionGroup>
  <Accordion title="What is writedocs.json?" icon="file-cog">
    The config file describing navigation, styles, and metadata for your site. See [Configuration overview](/docs/configuration/overview/).
  </Accordion>
  <Accordion title="Can I self-host the output?">
    Yes — the build produces a static `dist/` folder that can be hosted anywhere; no server-side runtime required.
  </Accordion>
</AccordionGroup>

```mdx
<AccordionGroup>
  <Accordion title="What is writedocs.json?" icon="file-cog">
    ...
  </Accordion>
  <Accordion title="Can I self-host the output?">
    ...
  </Accordion>
</AccordionGroup>
```

**`Accordion` props**

<Parameter name="title" type="string" required>
  Like `Callout`/`Card`/etc., becomes a linkable `#slug` anchor next to it automatically, deduped against every other titled element on the page.
</Parameter>

<Parameter name="icon" type="string">
  Resolved the same way as `Card`'s own `icon` prop — see [Icons](/docs/content/components/icon/#icons). With none set, the row lays out exactly as before.
</Parameter>

<Parameter name="description" type="string">
  A smaller, muted line under the title.
</Parameter>

<Parameter name="defaultOpen" type="boolean" default="false">
  Renders the accordion already expanded.
</Parameter>

`AccordionGroup` takes no props — it's a spacing wrapper that also unites its children under one shared border.