アコーディオン

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

対応プロファイル

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

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

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

accordion.mdx

FumadocsProsefly

ビジュアルソース

サンプルをリセット

エディターを読み込み中…

編集できるサンプルです。変更はこのページ内にのみ保持されます。

ソースの例

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

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

プロファイルによる違い

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

Starlight Details

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

details.mdx

Starlight

ビジュアルソース

サンプルをリセット

エディターを読み込み中…

編集できるサンプルです。変更はこのページ内にのみ保持されます。

ソースの例

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

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

</details>

関連する MDX ガイド

次に読む: コールアウト · タブ · ステップ.