アコーディオン
Accordion
別名: 折りたたみパネル、Collapse、Disclosure、Expander、details/summary
生態（さわってみる）
注文確定から通常2〜4営業日でお届けします。離島・一部地域は追加日数がかかる場合があります。
商品到着後7日以内、未使用の場合に限り返品を承ります。マイページの注文履歴からお手続きください。
クレジットカード、コンビニ決済、代金引換に対応しています。
一言定義
見出しをクリックすると、その下のコンテンツパネルが開閉する、縦に積んだ開閉式UI。
分類
使う場面
- 同じ縦方向のスペースに多数のセクションを詰めたいFAQ・仕様一覧など
- 各項目を独立して開閉させ、必要なら複数を同時に開いたまま比較したいとき
避ける場面
- 常にすべての内容を見せる前提のページ（隠す必然性がないなら開いたままの見出し構成でよい）
- 排他的に1パネルだけを切り替えたい・横幅に余裕がある（→タブ）
近縁種との比較
タブは選択中の1パネルしか表示しない排他的な切り替えUIであるのに対し、アコーディオンは複数 パネルを同時に開いたままにでき、一覧性を優先できる点で異なる。見た目が横並びか縦積みかという 違いだけでなく、「同時に何個見えていてよいか」という設計判断が本質的な使い分け基準になる。 続きを読むは1つのブロックの省略・展開に特化した単純な開閉であり、複数セクションを構造化して 並べるアコーディオンより粒度が小さい。
実例リンク
アクセシビリティ
- role
- 見出しに button[aria-expanded][aria-controls]、パネルは role="region" + aria-labelledby でボタンと紐付け
- キーボード操作
- Tabで見出しボタン間を移動、Enter/Spaceで開閉。パネル内は通常のTab移動
- 補足
- The Component Galleryではエイリアスとして Collapse / Disclosure / Expander を挙げる。HTML標準の details/summary で同等機能をネイティブ実装できる場合もある