Accordion and AccordionGroup

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.

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, and import it.

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

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

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

<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, 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.

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

description string

A smaller line under the title.

defaultOpen boolean default: false

Open when the page loads.

AccordionGroup has no props.