アコーディオン

複数のディスクロージャーを縦に連ね、一度にひとつのブロックだけが開くようにする。
理由:縦に長い領域において、タブの並列切替と同等の機能を提供するため。

図例
アコーディオン

効能

  • フレキシブルペインを用いて画面を左右に分割するような場合、アコーディオンを用いることで、縦長の領域に複数のブロックや階層的なメニュー項目を効率的に格納できる。
  • 新たにディスクロージャーを開くと、それまで開いていた部分が自動的に閉じるので、各ディスクロージャーが一定の領域内で最大の一覧性を確保できる。

用法

  • ディスクロージャーを縦に連ねて、各トリガーが領域の見出し帯になるようにする。
  • デフォルトでひとつのディスクロージャーを開いておく。
  • 他のディスクロージャーを開くと、それまで開いていたものが閉じるようにする。
  • どのディスクロージャーが開いている時でも、アコーディオン全体の縦の長さが一定になるようにする。
  • 開閉時には、アニメーションによる補完表現を用いて、領域が徐々に開いていくような視覚効果を加える。
  • 数の多いメニュー項目、プロパティシートなどのフォーム、個別のレイアウトを持つコンテンツなど、ディスクロージャーに含める内容は自由に決めてよい。

注意書き

  • ディスクロージャーと違い、アコーディオンは、新たなブロックを開くとそれまで開いていたブロックが閉じるので、同時に複数のブロックの内容を見せたい場合には使えない。
  • 見出し帯状のトリガーをクリックすると、(一番上以外は)ディスクロージャーが開くことによってトリガーの位置が移動してしまうため、状況を見失いやすい。アニメーションを伴う開閉表現によって是正できる。
  • トリガーの位置がクリック後に移動してしまうので、開いたあとすぐに閉じるという操作がしにくい。