問題
3CSSのみでアコーディオンを実装しよう
Webにおけるアコーディオンとは、アコーディオンメニューのことを指しており、クリックすることで隠れている詳細を展開表示させる事ができます。 jQueryでも作れますが、今回CSSで実装していきます。
HTML/CSSの問題に挑戦しよう！
問題
「CSSのみでアコーディオンを実装しよう」
CSSのみでアコーディオンを実装してみましょう。
また、要素をクリックするとアニメーションで
パカパカアコーディオンになるようにしましょう。
見本を参考に作成してください。
期待する画面
解答と解説（CSSのみでアコーディオンを実装しよう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
CSSのみでのアコーディオン実装で肝なのは
チェックボックスを使用するということです。
inputがcheckdの時にコンテンツを出すといたって単純なことをやっております。
まず、inputとlabelを連動する為にはinputのid属性とlabelのfor属性を同じ名前にします。
その際にinputのチェックボックスは、display: none;で消しときましょう。
そして、開いた時のコンテンツにはデフォルト値として
max-height: 0;とoverflow-y: hidden;を付与しておきます。
こうしておく事で、視認できなくなり要素は隠れます。
そして、セレクタを上手く使用してinputにcheckdがついたら隠しておいた要素に高さをつけ見えるようにします。アニメーションについては、隠す要素のデフォルト値にtransition: all 0.5s;などすれば、アニメーションできます。
補足
今回の問題はセレクタの指定方法が少し難しく感じたのではないかと思います。
チェックボックスを表示させているinput要素にcheckedが入ったときに
アコーディオンメニュー内のli要素を表示させるというセレクタの書き方が
少し複雑になります。
+(プラス)演算子を付けて記述しておかないと、うまく表示させることはできません。
また、animationさせる場合のtransitionはchecked内に記述してしまうと戻るときにanimationされなくなってしまうのでliタグ自体に対して付与するようにしましょう。
