アコーディオンメニューとは
こんな感じのやつ。ドロップダウンとも言うのかな。
やってみよう！
inputタグのcheckboxを利用します。
xxx.html.erb
<divclass="accbox"><labelfor="label1">クリックして表示1</label><inputtype="checkbox"id="label1"class="cssacc"/><divclass="accshow"><!--ここに隠す中身--><p>こんにちは1
</p></div></div>xxx.scss
.accboxinput{display:none;/*チェックボックスを隠す*/}.accbox.accshow{height:0;/*高さを0に*/padding:0;/*余白を0に*/overflow:hidden;/*非表示に*/opacity:0;/*中身を透明に*/transition:0.8s;/*クリック時の動きを滑らかに*/}.cssacc:checked+.accshow{height:auto;/*クリックで高さを加えて中身を表示*/padding:5px;background:#eaeaea;opacity:1;}基本の流れは、
①チェックボックスを隠す
②中身を隠す
③クリックしたら中身を表示させる
この3つです。
.cssacc:checked + .accshowは見慣れないと思います。
○ ＋ △とすると
○のすぐ後の要素△のみにCSSをあてるというものです。
この場合、チェックが入ったinputタグのすぐ後のdivタグを表示します。
参考です。