Skip to main content

Accordion

2 min readStableBeginner

Accordion renders a titled toggle button over a collapsible panel, so long FAQ and troubleshooting content stays scannable. Each example below shows the live component first, then the exact MDX that produced it.

Quick Start

One section with a title and body — nothing else required.

MDX lets you write JSX in Markdown documents.

app/features/components/accordion.mdx
MDX
<Accordion title="What is MDX?">
  MDX lets you write JSX in Markdown documents.
</Accordion>

Adding Options

Stack several accordions to build an FAQ. Each one tracks its own open state, so opening a second section leaves the first one open.

OwnDocs uses JWT-based session cookies for private mode.

Yes. Set the THEME_VARIANT environment variable to any of 26 options.

app/features/components/accordion.mdx
MDX
<Accordion title="How does authentication work?">
  OwnDocs uses JWT-based session cookies for private mode.
</Accordion>
 
<Accordion title="Can I customize the theme?">
  Yes. Set the `THEME_VARIANT` environment variable to any of 26 options.
</Accordion>

Advanced

defaultOpen expands a section on page load. id does two things: it goes on the wrapper element so the browser can scroll to it, and it makes the section expand automatically when the page URL ends in that same hash.

This starts expanded on page load.

Linking to /features/components/accordion#faq-direct opens this automatically.

children takes any MDX, so a long answer can carry lists, inline code, and other components. Leave a blank line after the opening tag and the body parses as normal Markdown.

Three steps, and the running server picks the change up on the next request:

  1. Generate a new hash.
  2. Replace AUTH_PASSWORD_HASH in .env.local.
  3. Restart the dev server.
app/features/components/accordion.mdx
MDX
<Accordion title="Most readers need this" defaultOpen>
  This starts expanded on page load.
</Accordion>
 
<Accordion title="Direct link target" id="faq-direct">
  Linking to `/features/components/accordion#faq-direct` opens this
  automatically.
</Accordion>
 
<Accordion title="How do I reset the admin password?" id="faq-reset">
 
Three steps, and the running server picks the change up on the next request:
 
1. Generate a new hash.
2. Replace `AUTH_PASSWORD_HASH` in `.env.local`.
3. Restart the dev server.
 
</Accordion>

Options

titlestringrequired

Heading text on the toggle button.

idstring

Sets the wrapper element id and enables URL hash deep-linking. Also seeds the trigger and panel ids used by aria-controls and aria-labelledby; without it, those ids are generated.

defaultOpenbooleanDefault: false

Starts the section expanded on load.

childrenReactNoderequired

Content shown when the section is expanded. Any MDX works — paragraphs, lists, and other components.

Each accordion keeps its own state, so there is no exclusive group mode: opening one leaves the others alone. The panel animates its height over 300ms, and the hash check runs once when the section mounts, so id deep-linking works on page load rather than on a hash change made later in the same visit.

Related pages

Cards

Tabs

Was this page helpful?