> ## Documentation Index
> Fetch the complete documentation index at: https://docs.holydocs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Accordion

Collapsible sections for FAQs, optional details, and content that benefits from progressive disclosure.

**Interactive playground** For isolated previews, theme switching, and sandbox editing, open [the Accordion playground on holydocs.com](https://holydocs.com/components/accordion).

## When to use

Use this component when you need stronger document structure, annotation, or narrative pacing inside a page.

## Live Examples

Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.

### Collapsed

Default closed state.

**What is HolyDocs?**

HolyDocs is an AI-native documentation platform built for modern teams.

~~~mdx
<Accordion title="What is HolyDocs?">
  HolyDocs is an AI-native documentation platform built for modern teams.
</Accordion>
~~~

### Default Open

Starts expanded on page load.

**Quick answer**

This accordion is open by default so readers see the content immediately.

~~~mdx
<Accordion title="Quick answer" defaultOpen>
  This accordion is open by default so readers see the content immediately.
</Accordion>
~~~

### Group

Multiple accordions wrapped in a group.

**How does billing work?**

Plans are billed monthly or annually. You can upgrade or downgrade at any time.
  **Can I export my docs?**

Yes — export to PDF or Markdown with one click from the dashboard.
  **Is there a free plan?**

Absolutely. The free tier includes up to 3 projects and 50 AI requests per month.

~~~mdx
<AccordionGroup>
  <Accordion title="How does billing work?">
    Plans are billed monthly or annually. You can upgrade or downgrade at any time.
  </Accordion>
  <Accordion title="Can I export my docs?">
    Yes — export to PDF or Markdown with one click from the dashboard.
  </Accordion>
  <Accordion title="Is there a free plan?">
    Absolutely. The free tier includes up to 3 projects and 50 AI requests per month.
  </Accordion>
</AccordionGroup>
~~~

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `string` | `Section title` | Label shown on the collapsed header. |
| `defaultOpen` | `boolean` | `false` | Whether the accordion starts in the expanded state. |

## Usage

Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.

~~~mdx
<Accordion title="What is HolyDocs?">
  HolyDocs is an AI-native documentation platform built for modern teams.
</Accordion>
~~~

## Tips

- Keep the surrounding copy short so the component remains the focal point instead of becoming redundant chrome.
- Prefer one clear job per component instance. If a block is trying to explain, navigate, and warn at the same time, split it up.
- Check the page in both light and dark mode when you stack multiple content components together. Dense compositions can feel heavier than expected.

## Related Components

**[Callout](/components/callout)**

Highlighted message blocks for drawing attention to notes, tips, warnings, and other contextual information.
**[Card](/components/card)**

Versatile content containers that can display titles, icons, descriptions, and optional links.
**[CardGroup](/components/card-group)**

Responsive grid container for laying out multiple cards in even columns.

## More

- Interactive playground: [Accordion on holydocs.com](https://holydocs.com/components/accordion)
- Component library index: [/components](/components)