Octri

Accordion

An accordion hides detail behind a heading a reader clicks to open, such as troubleshooting steps or a long list of options. Put several in an AccordionGroup to draw them as one bordered list.

Example

mdx
<AccordionGroup>
  <Accordion title="Why does this return 401?" defaultOpen="true">
    Your token has expired. Sign in again for a new one.
  </Accordion>
  <Accordion title="Why does this return 429?">
    You've hit the rate limit. Wait for the time in the `Retry-After` header.
  </Accordion>
</AccordionGroup>

Accordion props

titlestringrequired

The heading a reader clicks.

defaultOpenboolean

Starts the accordion open. Use it for the one most readers need.

To start closed, leave the prop out. Any value opens it, including "false".

childrenMarkdown

The hidden content, between the tags. Leave a blank line after the opening tag and before the closing one.

<AccordionItem> is another name for Accordion, for pages written for other tools.

AccordionGroup props

childrenAccordion

The accordions. Each opens and closes on its own.

What not to hide

Content in a closed accordion is easy to miss. Don't put anything a reader must do in one, and don't hide a warning.

  • Tabs: alternatives where one applies.
  • Callout: something readers must see.