Accordion

コンテンツを折りたたみ可能なセクションに整理するコンポーネント。FAQやメニューなど、限られたスペースで多くの情報を表示する際に使用します。

Basic

jui-accordion の最も基本的な使用例です。

子コンポーネント jui-accordion-item を使用して、HTMLで直接アコーディオンをマークアップする使用例です。

HTMLで直接入れ子に配置したコンテンツです。任意のマークアップを使用できます。

複数展開不可（デフォルト）のため、こちらを開くと項目1が自動で閉じます。

このコンポーネントが使用しているブラウザ機能と対応状況です。

機能	用途	Chrome	Firefox	Safari	ステータス
`<details>` / `<summary>`	開閉動作	全ver	全ver	全ver	Baseline
`::details-content`	開閉アニメーション	131+	143+	18.4+	Baseline 2025
`interpolate-size: allow-keywords`	高さ auto トランジション	129+	❌	17.2+	Limited

💡 ::details-content と interpolate-size は開閉時のスムーズなアニメーションに使用しています。未対応ブラウザでもアコーディオンの開閉動作自体は正常に機能します。

機能	Baseline 達成	Widely Available 予定
`<details>` / `<summary>`	太古の昔から対応	WA 済み ✅
`::details-content`	2025年初頭	2027年後半
`interpolate-size`	部分的対応（Chrome 129+, Safari 17.2+、Firefox 未対応）	—

WAI-ARIA:
- 各項目はネイティブの <details> / <summary> 要素で構成されており、ヘッダー（<summary>）の開閉状態（aria-expanded 相当）やパネルとの関連付けはブラウザが標準で提供します。追加の aria-* 属性をコンポーネント側で付与する必要はありません。
- multiple が false（デフォルト）の単一展開モードでは、各 <details> に共通の name 属性を付与することで、ブラウザネイティブの排他制御により同時に開けるのは 1 項目のみとなります。
- 無効化された項目の <summary> には aria-disabled="true" が付与され、操作できない状態であることが支援技術に伝わります（クリックによるトグルも抑制されます）。
- 開閉インジケーターのシェブロン SVG には aria-hidden="true" が指定されており、装飾要素として支援技術から無視されます。
キーボードナビゲーション:
- Tab キーで各ヘッダー（<summary>）へフォーカスを移動でき、Enter または Space キーで該当項目の開閉を切り替えられます。これらはネイティブの <details> / <summary> の挙動に委ねています。

コンポーネントが受け付ける属性（Props）の一覧と詳細仕様です。

Property	Attribute	Description	Type	Default
`items`	`items`	項目（JSON文字列 or 配列）	`AccordionItem[] \| string`	`'[]'`
`multiple`	`multiple`	複数同時展開を許可	`boolean`	`false`
`variant`	`variant`	バリアント	`"bordered" \| "default" \| "splitted"`	`'default'`

コンポーネントから発火するカスタムイベントの一覧です。

Event	Description	Type
`juiToggle`	展開/折りたたみ時	`CustomEvent<{ key: string; isOpen: boolean; }>`

コンポーネント内に子要素を挿入するためのスロット一覧です。

Slot	Description
	jui-accordion-item 子要素（items Prop 未指定時のフォールバック）

CSSから直接スタイリング可能な内部要素（Parts）の一覧です。

Built with StencilJS