# Accordion and AccordionGroup

> For the complete documentation index, see [llms.txt](https://preview.writedocs.io/llms.txt).

Sections that open and close - for FAQs, optional details, and long content the reader may skip.

An `Accordion` is a section that opens and closes on click, showing just its title until then - for an FAQ, optional details, or content most readers skip. `AccordionGroup` puts several under one border.

**What is writedocs.json?**

The file that describes your site: its name, colors, navigation and the rest. See [writedocs.json](https://preview.writedocs.io/docs/configuration/overview/).

**Where is my site published?**

Push your changes, and the site is built and published from there.

**Can I use my own components?**

Yes - write a React component in a [snippet](https://preview.writedocs.io/docs/content/snippets/), and import it.

```mdx
<AccordionGroup>
  <Accordion title="What is writedocs.json?">
    The file that describes your site: its name, colors, navigation and the rest.
  </Accordion>
  <Accordion title="Where is my site published?">
    Push your changes, and the site is built and published from there.
  </Accordion>
  <Accordion title="Can I use my own components?">
    Yes - write a React component in a snippet, and import it.
  </Accordion>
</AccordionGroup>
```

## Icon and description

`icon` adds an icon before the title, and `description` a line under it:

**Authentication**

API keys and OAuth 2.0

Send your key in the `Authorization` header: `Bearer sk_live_...`.

**Rate limits**

How many requests you can send

1,000 requests per minute per key. Over the limit, requests get a `429` response.

```mdx
<AccordionGroup>
  <Accordion title="Authentication" icon="key-round" description="API keys and OAuth 2.0">
    Send your key in the `Authorization` header: `Bearer sk_live_...`.
  </Accordion>
  <Accordion title="Rate limits" icon="gauge" description="How many requests you can send">
    1,000 requests per minute per key. Over the limit, requests get a `429` response.
  </Accordion>
</AccordionGroup>
```

## Open from the start

`defaultOpen` shows the accordion open when the page loads:

**Full response example**

```json
{
  "id": "pay_123",
  "amount": 1000,
  "status": "succeeded"
}
```

````mdx
<Accordion title="Full response example" defaultOpen>
  ```json
  { "id": "pay_123", "amount": 1000, "status": "succeeded" }
  ```
</Accordion>
````

An accordion works without a group too, as above.

## Linking to an accordion

Each accordion's title is an anchor - point at the title for its link icon. A link to it, like [#rate-limits](#rate-limits), scrolls to the accordion; the reader opens it with a click.

## Formatted titles

For code or bold text in a title, write the title as markup, between `{<>` and `</>}`:

**SUCCEEDED status details**

The payment went through.

```mdx
<Accordion title={<><code>SUCCEEDED</code> status details</>}>
  The payment went through.
</Accordion>
```

The anchor comes from the title's text: `#succeeded-status-details`. Callouts and an Update's `label` take a formatted title the same way.

## Accordion props

**`title`** `string` required

The accordion's title, shown when it's closed - text, or markup like `{<><code>X</code> details</>}`. It's also its anchor: `#rate-limits` for "Rate limits".

**`icon`** `string`

An icon before the title - any [icon](https://preview.writedocs.io/docs/content/components/icon/#icons).

**`description`** `string`

A smaller line under the title.

**`defaultOpen`** `boolean` default: `false`

Open when the page loads.

`AccordionGroup` has no props.