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

# Accordion

Collapsible content sections for FAQs and detailed information.

Use the `Accordion` component to hide content behind a toggle. Group multiple accordions together with `AccordionGroup` for a clean, bordered container.

## Basic accordion

```mdx
<Accordion title="What formats does blodemd support?">
  Blode.md uses MDX, which combines standard Markdown with JSX components. You
  can also reference OpenAPI specs for auto-generated API docs.
</Accordion>
```

### What formats does blodemd support?

Blode.md uses MDX, which combines standard Markdown with JSX components. You
  can also reference OpenAPI specs for auto-generated API docs.

## Accordion group

Wrap multiple accordions in an `AccordionGroup` to render them in a single bordered container with dividers:

```mdx
<AccordionGroup>
  <Accordion title="How do I get started?">
    Run `blodemd new` in your project directory, then `blodemd dev` to preview
    locally.
  </Accordion>
  <Accordion title="Can I use custom domains?">
    Yes. After deploying, add a custom domain in your project settings and
    update your DNS records.
  </Accordion>
  <Accordion title="Is there a free tier?">
    Blode.md offers a generous free tier for open-source and personal projects.
  </Accordion>
</AccordionGroup>
```

  ### How do I get started?

Run `blodemd new` in your project directory, then `blodemd dev` to preview
    locally.
  ### Can I use custom domains?

Yes. After deploying, add a custom domain in your project settings and
    update your DNS records.
  ### Is there a free tier?

Blode.md offers a generous free tier for open-source and personal projects.

## Default open

Set `defaultOpen` to expand an accordion on page load:

```mdx
<Accordion title="This section is open by default" defaultOpen>
  You can use this for content that should be visible immediately but still
  collapsible.
</Accordion>
```

### This section is open by default

You can use this for content that should be visible immediately but still
  collapsible.

## With a description

Add a `description` prop to display secondary text below the title:

```mdx
<Accordion title="Deployment" description="How publishing works">
  Run `blodemd push` to deploy your documentation. Changes go live in seconds.
</Accordion>
```

### Deployment

Run `blodemd push` to deploy your documentation. Changes go live in seconds.

## Props

### Accordion

- `title` (type: string, required: true): The heading text shown in the toggle button.
- `description` (type: string, required: false): Secondary text displayed below the title.
- `defaultOpen` (type: boolean, required: false, default: false): Whether the accordion starts expanded.
- `id` (type: string, required: false): Custom anchor ID. Defaults to a slugified version of the title.
- `icon` (type: ReactNode, required: false): Icon displayed before the title.
- `children` (type: ReactNode, required: true): Content revealed when the accordion is open.

### AccordionGroup

`AccordionGroup` accepts `children` (one or more `Accordion` components) and renders them in a bordered container.