Accordions create collapsible sections to organize content efficiently. Use them for FAQs, optional details, or to reduce page length.

Basic Accordion

A single accordion with a title:

What is an accordion?

An accordion is a collapsible section that hides content until the user clicks to expand it. Perfect for FAQs, optional information, or dense content.

<Accordion title="What is an accordion?">

  An accordion is a collapsible section that hides content until the user clicks to expand it.

</Accordion>

Open by Default

Set open (or open={true}) to expand an accordion initially:

Important Notice

This accordion is open by default because it contains important information that users should see immediately.

<Accordion title="Important Notice" open>

  This accordion is open by default because it contains important information.

</Accordion>



<Accordion title="Also open by default" open={true}>

  This accordion is open by default because it contains important information.

</Accordion>

AccordionGroup

Use <AccordionGroup> to group multiple related accordions:

How do I install?

Installation is simple:

npm i -g relevate

How do I configure?

Create a docs.json file in your project root with your configuration.

How do I preview locally?

Run local preview:

relevate preview

How do I publish?

Publish your docs through the managed Relevate platform.

<AccordionGroup>

  <Accordion title="How do I install?">

    Installation is simple...

  </Accordion>

  

  <Accordion title="How do I configure?">

    Create a `docs.json` file...

  </Accordion>

  

  <Accordion title="How do I preview locally?">

    Run local preview...

  </Accordion>

</AccordionGroup>

Complex Content

Accordions support rich content including code, callouts, and more:

Code Examples

Here's a complete example:

relevate preview

relevate a11y

Preview updates automatically as you edit docs.

Configuration

Your docs.json should look like this:

{

  "name": "My Docs",

  "theme": "sky",

  "navigation": {

    "tabs": [...]

  }

}

Troubleshooting

Common issues:

If preview fails, check that all referenced files exist.

  • Error 1: Missing config file

    • Solution: Create docs.json in project root

  • Error 2: Invalid JSON syntax

    • Solution: Validate your JSON with a linter

<AccordionGroup>

  <Accordion title="Code Examples">

    ```bash

    relevate preview

    ...

    ```

    

    <Tip>

    Preview updates automatically...

    </Tip>

  </Accordion>

  

  <Accordion title="Configuration">

    Your `docs.json` should look like this...

  </Accordion>

</AccordionGroup>

Available Options

title
string
required

The accordion header text

open
boolean

Whether the accordion is initially expanded (default: false)

Best Practices

Use for FAQs

Accordions are perfect for FAQ sections where users scan for specific questions

Group Related Items

Use AccordionGroup to visually connect related accordions

Add Icons

Icons help users quickly identify accordion content

Keep Titles Clear

Use descriptive titles so users know what's inside before expanding

Accordions are great for optional or supplementary information. For critical content that all users should see, use regular text instead.

Full Image