Accordion

Accordion renders a titled toggle button over a collapsible panel. Long troubleshooting notes stay scannable that way. This page covers the plain title-and-body form, stacking sections into a list of frequently asked questions, deep-linking a section with id, and the full prop list.

Quick Start

One section with a title and body; nothing else is required.

<Accordion title="What is MDX?">
  MDX lets you write JSX in Markdown documents.
</Accordion>

Adding Options

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

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

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.

<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

No exclusive group mode exists. 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.