checkboxでアコーディオンを作る

checkboxとCSSの~(一般兄弟結合子)を利用すると
トグル開閉できる上で、開いた際に兄弟要素を全て閉じるアコーディオンを効率よく作られます。

See the Pen checkbox accordion by webdev (@webdev-jp-net) on CodePen.0

トグル(単独で開閉)させたいのでradioは使えない

タブのように、兄弟のうち必ずどれかひとつが開いているならば、JavaScriptなしradioとCSSだけで実装できますが
アコーディオンにする場合は、単独での開閉も必要…

最初はJavaScriptでradioのcheckedを解除する仕組みで作ってみましたが、率直に表示へ反映されず一筋縄でいかなかったので
checkboxでトグル化した上で、JavaScriptで兄弟checkboxのcheckedを解除する方針に切り替えました。

querySelectorAllで:not()を使いfilter処理を節約

JavaScriptでcheckboxchangeイベントを率直に設定したならば概ねこうなるのでは。

  1. 自身がchecked = trueならば
  2. nameが一致するチェックボックスをNodeリストとして取得
  3. 取得したNodeリストを配列に変換
  4. filtervalueの値が自分と異なる要素のみに絞り兄弟要素とする
  5. 兄弟要素へforEachchecked = false;していく

ためしに、Element.querySelectorの条件指定はCSSセレクタと一緒でも解説した、:not()を利用してみると、filterをスキップできました。

  1. 自身がchecked = trueならば
  2. nameが一致して且つvalueは異なるチェックボックスをNodeリストとして取得(この時点で兄弟要素)
  3. 取得したNodeリストを配列に変換
  4. filtervalueの値が自分と異なる要素のみに絞り兄弟要素とする
  5. 兄弟要素へforEachchecked = false;していく

関連記事