Accordions

An accordion hides details, like an FAQ answer, under a title that readers click to open.

<AccordionGroup>
  <Accordion title="Does Acme Flow work offline?" defaultOpen>
    Yes. Changes sync when you're back online.
  </Accordion>
  <Accordion title="Can I use my own domain?">
    Yes, a subdomain or a path on your website.
  </Accordion>
</AccordionGroup>

An accordion group with one open accordion on a Notra site — How it looks on your site

Accordions work without JavaScript, and search engines read their content even when they’re closed. AccordionGroup draws a line above the first accordion so a list of them looks like one block.

Props

Accordion

string

required

The question or label readers click.

boolean

default:"false"

Open the accordion when the page loads.

AccordionGroup takes no props.

Styling

Accordions carry the class accordion and groups carry accordion-group.

Last modified on October 8, 2026

Get started

Domains

Write content

Components

Customize

Publish

Reference

Props

Accordion

Styling

​Props

​Accordion

​Styling

Props

Accordion

Styling