접기 메뉴

해봐!

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

.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;
}