UI Component Lab English

← コンポーネント一覧

開閉・切替

Accordion アコーディオン

縦に並んだ見出しごとに、内容の表示・非表示を切り替える部品。

別名

見分けるポイント

線で区切られた行が並び、各行にタイトルと「+/−」や山形のアイコンがある。開いた行はタイトルのすぐ下に内容が出る。

挙動

  • 見出しをクリックすると、その項目が開閉する。
  • アイコンが変わり、開いているかどうかが分かる。
  • 同時に1つしか開けないものもある。このデモでは各項目を独立して開閉できる。

キーボード操作

キー動作
Tab / Shift + Tab見出しと内容の間を移動する。
Enter / Spaceフォーカス中の項目を開閉する。

使い分け・注意点

  • スペースを節約するためだけに使ったり、重要な情報を隠したりしない。
  • 1つのセクションの中の補足を畳むなら、ディスクロージャーを使う。
  • リスト、テーブル、アコーディオン、ディスクロージャーの中には入れない。
  • ディスクロージャー: アコーディオンはディスクロージャーを見出し付きで縦に並べたもので、ディスクロージャーは単独の開閉部品。
  • タブ: アコーディオンは縦に積んで複数を同時に開けるが、タブは横に並べて1枚ずつ表示する。
  • ツリービュー: アコーディオンは内容のまとまりを開閉し、ツリービューはフォルダのような入れ子の項目を何段にも開閉する。

出典