CSSだけでアコーディオンメニューをつくる。 ❏CSS❏

アコーディオンメニューとは

こんな感じのやつ。ドロップダウンとも言うのかな。

やってみよう！

inputタグのcheckboxを利用します。

xxx.html.erb

<div class="accbox">
   <label for="label1">クリックして表示1</label>
   <input type="checkbox" id="label1" class="cssacc" />
   <div class="accshow">
      <!--ここに隠す中身-->
      <p>
        こんにちは1
      </p>
   </div>
</div>

xxx.scss

.accbox input {
  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タグを表示します。

ではまた！