今回はよくある質問ページ等でよくみる、アコーディオンメニューの作成方法をご紹介します。
目次
1.実装例
2.解説
3.まとめ
1.実装例
See the Pen
B アコーディオン by ハスキーに会いたい (@yfpgqlgd-the-builder)
on CodePen.
※右下の「Rerun」で何度も再生できます。
質問の部分をクリックすると、下に回答が表示されると思います。
閉じるときは、質問か回答どちらかをクリックすると元に戻ります。
2.解説
それではCSSでどのように制御しているのか、解説していきます。
今回はチェックボックスを使って、動きを付けています。
回答を表示させる動き
アコーディオンの中身ですが、「height（高さ）」を0、「opacity（透明度）」0にします。こうすることで、回答が非表示の状態になります。
次に質問をクリックしたときに回答を表示させる（チェックボックスにチェックが入ったとき、中身を表示させる）動きです。
heightをauto、opacityを1にするとアコーディオンの中身が表示されます。
この部分以外は装飾の記述となりますので、割愛します。
3.まとめ
よく使う動きなので、今回のブログのテーマにさせていただきました。
前回のローディングと同様、CSSだけで作れるので、複雑な手間もかかりません。
カスタマイズもしやすいと思います。
それではまた…
