# アコーディオン

Fumadocs と Prosefly の MDX ドキュメントで、折りたたみ項目や FAQ を編集します。

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

Prosefly の MDX コンポーネントエディターで折りたたみ項目や FAQ を編集し、Fumadocs または Prosefly の構文を保てます。

## 対応プロファイル

同じエディターで [Astro](/ja/frameworks/astro/)、[Starlight](/ja/frameworks/starlight/)、[Fumadocs](/ja/frameworks/fumadocs/)、[Prosefly](/ja/frameworks/lotus/) の各プロファイルを使えます。サイトに合うプロファイルを選ぶと、その連携で利用できる構文と編集コントロールを確認できます。

## ビジュアルモードで編集する

項目を開き、本文と見出しを直接編集します。グループの追加操作で項目を増やせます。項目ごとの操作で移動や削除もできます。設定できるグループと項目の属性は、プロファイルによって異なります。

<ContentEditor content="accordion" />

## ソースの例

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

<Accordions type="multiple">
  <Accordion title="下書きはどこに保存されますか？" value="drafts">
    下書きは公開するまで Content Space に保存されます。
  </Accordion>
  <Accordion title="既存のサイトを使い続けられますか？" value="site">
    公開後の内容は、既存のアプリとビルド処理で配信できます。
  </Accordion>
</Accordions>
```

## プロファイルによる違い

| プロファイル | グループと項目                                                                        |
| ------------ | ------------------------------------------------------------------------------------- |
| Fumadocs     | Accordions と Accordion。グループには `type="single"` または `type="multiple"` を指定 |
| Prosefly     | Accordions と AccordionItem。グループには `multiple` を指定                           |
| Starlight    | 専用の Accordion コンポーネントはなし                                                 |

項目の value を使う場合は、一意にしてください。編集のために項目を開く操作と、公開時に開いておく属性の設定は別です。Starlight の HTML details は、ここで紹介する Accordion とは別の形式です。

## Starlight Details

Starlight は開閉コンテンツにネイティブ HTML の `<details>` 要素を使います。単純な開閉式の注記には、Fumadocs や Prosefly の Accordion グループではなく、次の例を使えます。

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

## ソースの例

```mdx
<details open>
  <summary>エディターで何が保持されますか？</summary>

本文はビジュアルモードで編集できます。

</details>
```

## 関連する MDX ガイド

次に読む: [コールアウト](/docs/ja/editor/components/callout/) · [タブ](/docs/ja/editor/components/tabs/) · [ステップ](/docs/ja/editor/components/steps/).