クリックすると表示される折りたたみメニューを実装する方法！

WEBページの制作において、下記のようなクリックすると表示される、折りたたみのメニューを作りたい時があります。（いわゆるアコーディオン）

例えばメニューが長くなりすぎて折りたたんで表示したいときなど、特にスマホサイトなどですっきりとした見た目で表示したいときに折りたたみのメニューは重宝します。

今回はこの折りたたみのメニューについてHTMLとCSSを使って実装していきたいと思います。

今回はシンプルにHTMLとCSSのみで、クリックすると表示される折りたたみメニューを実装してみたいと思います。

サンプルコードは下記となります。

今回はHTMLのlabelタグとinput[type="checkbox"]がポイントです。

labelタグはfor属性で指定した値をid属性に持つチェックボックスが存在している場合、labelタグの中身をクリックしたときに有効にする機能があります。

つまり上記のサンプルコードの「▼  クリックで展開1」のテキストをクリックするとチェックボックスが有効になります。
（今回あえてチェックボックスを非表示にしているためブラウザからは見えない）

チェックボックスが有効になることでCSSの疑似クラス:checkedが使えます。つまり通常は非表示にしているコンテンツを、:checkedされているときに表示に切り替えるということで、コンテンツの表示・非表示を切り替えています。

つまり処理の流れとしては下記のようになります。

それでは先程のサンプルコードをベースに今度はクリックスと表示される折りたたみメニューを複数実装してみましょう。

1つ目のlabelタグ、inputタグ、divタグをコピーして2つ目・3つ目を作成しましょう。

その中でlabelのfor属性の値とinput[type="checkbox"]のid属性の値についてはかぶりがないように1つ目とは別の値に設定しましょう。

いかがでしたでしょうか。クリックすると表示される折りたたみメニューは動的な動きのためJavaScriptで実装すると先入観を持っている方もいるかと思いますが、HTMLとCSSのみでも実装することが出来ます。

ぜひ今回紹介したテクニックをご活用下さい！