1つの項目しか開けないアコーディオンメニューです。
ページを開いた時点で、項目が1つだけ開いていおり、他の項目を選択すると開いていた項目が閉じて、選択した項目だけが開きます。
実装にはHTMLの<input type="radio">を使います。<input type="radio">に隣接した<label>に表示したいコンテンツを格納し、ボタンが押されたら隣接したコンテンツを表示するように HTML と CSS を使って制御します。
複数の<input type="radio">をグループ化し、どれか一つが開いている時に他のコンテンツを排他的に処理して、択一選択を実現します。
複数の項目を同時に開くことができるアコーディオンメニューです。
ユーザーが必要な項目だけ選択して開けるように最初はすべて閉じているパターンが多いです。ヘルプページやQ&Aコーナーなどで多様されているイメージです。
挙動の制御にはオーソドックスな<input type="checkbox">を使用しています。こちらも HTML と CSS で表示を制御します。
複数の項目を同時に開くことができるアコーディオンメニューです。
基本的な仕様はtype-2と同様ですが、挙動の制御に<input type="checkbox">ではなく<details>と<summary>を使用しています。この2つはあまり聞き慣れないタグですが、アコーディオンメニューを実現する為に実装されたようなタグなので活用しています。
ただ、比較的新しいタグなので、IE11では使用できない、シンプルな挙動の制御はできるが、他の条件と組み合わせるには、やはり後述する JavaScript を使いたくなるなど、「アコーディオンメニューを実装するならコレ！」といった感じではなく、いまいち普及していない印象です。
表示の制御に関しては、HTML のみで動作する点が特徴です。
複数の項目を同時に開くことができるアコーディオンメニューです。
type-2, type-3 と同様の挙動を、JavaScript で実装しています。他のタイプは表示や装飾を制御する為に、構造や属性などが複雑になりがちでした。このタイプでは、それらに比べて HTML の構造が最もシンプルになっています。また、JavaScript を使うことで、より細かい挙動の制御が可能となります。
複数の項目を同時に開くことができるアコーディオンメニューです。
type-4 と同様の挙動を、jQuery で実装しています。jQuery なら簡単にアニメーション演出が可能となります。
toggleClass()メソッドを使ってスタイルを簡単に入れ替えたり、slideToggle()メソッドを使ってアニメーション付きでコンテンツを表示できます。jQuery を使用すると、アニメーションの速度なども簡単に設定できるので、非常に便利です。