# Accordion

Edit collapsible sections and FAQ accordions in Fumadocs and Prosefly MDX documentation.

import ContentEditor from '@/components/editor/ContentEditor.astro';

Use Prosefly’s MDX component editor to edit expandable sections and FAQ content while keeping your Fumadocs or Prosefly component syntax.

## Supported profiles

The same editor supports the [Astro](/frameworks/astro/), [Starlight](/frameworks/starlight/), [Fumadocs](/frameworks/fumadocs/), and [Prosefly](/frameworks/lotus/) profiles. Select the profile that matches your site to see the component syntax and controls available for that integration.

## Edit in Visual

Expand an item to work on its body and edit its title in the component. Use the group’s add-item action to create another item. Item controls let you move or remove an item. Group and item properties depend on the profile.

<ContentEditor content="accordion" />

## Source example

```mdx
import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';

<Accordions type="multiple">
  <Accordion title="Where are drafts saved?" value="drafts">
    Drafts stay in the Content Space until you publish them.
  </Accordion>
  <Accordion title="Can I keep my existing site?" value="site">
    Your current app and build pipeline continue to serve the published content.
  </Accordion>
</Accordions>
```

## Profile differences

| Profile   | Group and item                                                                |
| --------- | ----------------------------------------------------------------------------- |
| Fumadocs  | Accordions and Accordion; the group uses `type="single"` or `type="multiple"` |
| Prosefly  | Accordions and AccordionItem; the group uses the `multiple` property          |
| Starlight | No dedicated Accordion profile component                                      |

Keep item values unique where used. Expanding an item for editing is distinct from setting its published default-open properties. Starlight’s HTML details content is a separate form, not the Accordion component shown here.

## Starlight Details

Starlight uses the native HTML `<details>` element for disclosure content. Use the example below when your page needs a simple expandable note rather than a Fumadocs or Prosefly Accordion group.

<ContentEditor content="details" id="editor-component-accordion-details" />

## Source example

```mdx
<details open>
  <summary>What does the editor preserve?</summary>

The body remains editable in Visual mode.

</details>
```

## Related MDX guides

Read next: [Callout](/docs/editor/components/callout/) · [Tabs](/docs/editor/components/tabs/) · [Steps](/docs/editor/components/steps/).