Accordion

fandhe-frontend-pre-styled-ui の accordion mod が提供するスタイル済み Accordion 部品です。項目（Item）ごとに開閉するトリガー（ItemTrigger）とパネル（ItemContent）を持ち、高々 1 項目だけが開く single モードと複数項目が同時に開ける multiple モードの 2 つの状態機械（Accordion / MultiAccordion）を選べます。ページ内に収まる disclosure（開閉パネル）であり、他のセクションを覆うオーバーレイではないため、掲示位置を中和する専用 CSS は不要です。項目パネル（ItemContent）の開閉は headless 層が付与する hidden 属性で行いますが、JS 有効時は fandhe-frontend-wasm-full が実測した高さを CSS 変数（--fandhe-content-height）へ書き込み、@starting-style + transition-behavior: allow-discrete によって高さトランジションとして表現します（Collapsible と同型の仕組み）。JS 無効時は auto フォールバックで従来どおり hidden による即時切り替えのまま動作します。

Demo

開閉状態（data-state="open" / "closed"）に応じてスタイルが切り替わる開閉パネルの静的掲示です。

headless-ui の anatomy（data-scope / data-part）へテーマトークンと recipe CSS を重ねる styled 層です。

Features

高々 1 項目が開く single モード（Accordion）と、複数項目が同時に開く multiple モード（MultiAccordion）の 2 状態機械を提供する。
開いている項目の item-trigger / item-indicator を data-state="open" に連動してハイライトする。
size variant（Xs/Sm/Md/Lg/Xl）を root へ付与し、item-trigger / item-content の padding を切り替える。
item-trigger はキーボード操作時のみのフォーカスリング（:focus-visible）を持つ。
開閉状態（data-state）は呼び出し側が SSR/SSG のビルド時に渡した値がそのまま出力される。JS ゼロ SSG（クライアント側 JavaScript を読み込まない構成）での挙動・ネイティブ details/summary への代替パターンは「JS ゼロ SSG での利用ガイド」（/guides/no-js-ssg/）を参照。
JS 有効時、item-content の開閉は高さトランジションになる（イシュー #2192、案 C）。fandhe-frontend-wasm-full が実測した content 高さを CSS 変数（--fandhe-content-height）へ書き込み、@starting-style + transition-behavior: allow-discrete で hidden 属性の即時切り替えを遷移させる。JS 無効時（変数未設定）は auto フォールバックにより従来どおり hidden による即時切り替えのまま動作する。

Anatomy

root
  item
    item-trigger
      item-indicator
    item-content

API Reference

Arguments

Name	Type	Default	Description
`size`	`Size`	`Size::Md`	root へ付与するサイズ variant（Xs/Sm/Md/Lg/Xl）。item-trigger/item-content の padding を切り替える。

Data Attributes

Part	Attribute	Observed Values
`item`	`data-disabled`	（値なし）
`item`	`data-orientation`	`vertical`
`item`	`data-state`	`closed`, `open`
`item-content`	`data-disabled`	（値なし）
`item-content`	`data-orientation`	`vertical`
`item-content`	`data-state`	`closed`, `open`
`item-indicator`	`data-disabled`	（値なし）
`item-indicator`	`data-orientation`	`vertical`
`item-indicator`	`data-state`	`closed`, `open`
`item-trigger`	`data-disabled`	（値なし）
`item-trigger`	`data-orientation`	`vertical`
`item-trigger`	`data-state`	`closed`, `open`
`item-trigger`	`data-value`	`showcase-acc-1`, `showcase-acc-2`, `showcase-acc-3`
`root`	`data-orientation`	`vertical`

CSS Variables

Variable	Default
`--fandhe-accordion-content-padding`	`var(--fandhe-space-4)`
`--fandhe-accordion-trigger-padding`	`var(--fandhe-space-4)`

Examples

複数項目を同時に開く（multiple モード）

shadcn/ui 突合（イシュー #2026）で確認した合成パターンです。実運用では MultiAccordion（fandhe_frontend_headless_ui::state::MultiSelect を埋め込んだ状態機械）が複数項目の同時開閉を管理します。この掲示は SSR 静的マークアップのため、2 項目とも data-state="open" を固定表示しています。

いつでもアップグレード・ダウングレードできます。

14 日間の無料トライアルを提供しています。

トリガーにアイコンと説明文を組み合わせる

item_trigger の children は自由合成のため、追加引数なしでアイコン + タイトル + 説明文の組み合わせを表現できます（イシュー #2026）。item-trigger 直下は item_indicator と合わせて 2 要素に保ち、既存 CSS（space-between レイアウト）をそのまま活かしています。

重要な更新のメール通知は既定で有効です。プッシュ通知は端末設定から個別に切り替えられます。

Accessibility

WAI-ARIA

Attribute	Description
aria-expanded	item-trigger に付与。項目の開閉状態（open で true）を表す。
aria-controls	item-trigger に付与。controls が Some のとき対応する item-content の id を指す。
role="region"	item-content に付与。labelled_by が Some のとき aria-labelledby とセットで付与される。

Demo

pre-styled-ui とは何ですか？▾

クリックで開閉できますか？▾

エンタープライズ向けサポートはありますか？▾