アコーディオンとは、メニューの一部だけを表示し、クリックをすることですべてもしくはその項目のメニューを表示させることができるWebページの表示・操作要素のひとつです。一般的に、アコーディオンメニューといわれます。
アコーディオンは、蛇腹を動かすことで音を出すことができる楽器のことです。アコーディオンメニューはクリックすることで一部もしくはすべての項目を閉じたり開いたりすることができますが、その様子がアコーディオンを連想させるため、アコーディオンメニューと呼ばれます。
アコーディオンのわかりやすい例としては、ECサイトに設置されている商品のカテゴリメニューです。例えば、「スポーツ・アウトドア」、「食品・ドリンク」、「コスメ・ヘルスケア」などのメニューがあり、「スポーツ・アウトドア」をクリックすると「ゴルフ」「野球」「スノーボード」「釣り」などのメニューが表示されます。このような表示方法がアコーディオンです。
アコーディオンは、ユーザービリティ向上に役立ちます。最小限のメニューのみを表示させることができるため、モバイル端末でも見やすいです。また、それ以上の階層を知りたい人だけがクリックし、ニーズに合ったメニューを表示させることができるため、サイトの利便性が増します。
一方、一度にすべての情報を提供することができません。また、ユーザーが中身のコンテンツに気づかないというケースもあるため、その点がデメリットです。
アコーディオンは、JavaScriptなどを使用してレイアウトを制御することで実装可能です。クリックされた隠し要素を表示させる、もう一度クリックされたらその要素を取り除くという実装イメージになります。また、HTMLのdetailsタグとsummaryタグを使用してJavaScriptやCSSを使用せずに簡易的なアコーディオンを作成することも可能です。
