【HTML・CSS・javascript】jQueryを使わずにslideToggleを使いたい

jQueryも最近は使う機会がめっきり減ったなと思う今日この頃です。
jQueryが便利だったなーと思うことは色々あるのですが、特に便利だった物の一つに「slideToggle()」があったと思います。
当時、無駄にパカパカしたメニューを作った覚えはありませんか？
あのメニューです。

jQueryだとslideToggleの一文でアコーディオンメニューが出来たのですが、jQuery無しの場合だとちょっとだけ沢山コードを書くことになります。

HTML

<button type="button" id="button" class="button">
  OPEN
</button>
<div id="slide" class="slide">
  <div id="slideItem" class="box">
    <p>この部分がアコーディオンします</p>
    <p>この部分がアコーディオンします</p>
    <p>この部分がアコーディオンします</p>
    <p>この部分がアコーディオンします</p>
    <p>この部分がアコーディオンします</p>
    <p>この部分がアコーディオンします</p>
  </div>
</div>

CSS

.box {
  width:300px;
  padding:1rem;
  background:#ccc;
}
.slide {
  position:absolute;
  height:0;
  overflow:hidden;
  transition:all 1s;
}

javascript

window.onload = function () {
  const boxheight = document.getElementById("slideItem").clientHeight;
  let flug = false;
  document.getElementById("button").addEventListener(
    "click",
    function () {
      flug = !flug
      if (flug) {
        document.getElementById("slide").style.height = boxheight + "px";
      } else {
        document.getElementById("slide").style.height = 0 + "px";
      }
    },
    false
  );
}

動作の説明

HTMLはbuttonを押したらその下のid="slide"のdivがスライドする予定で作っています。
まずはスライドさせる前に閉じさせたいので、cssでスライドさせるdivの高さを0にして、overflow:hiddenで中身を隠すようにします。これで準備完了です。

javascriptはjQueryを使わない前提で話をしているのでバニラで記載します。
まず、.clientHeightを使ってdivの中身の高さを取得します。それと同時にボタンを押したらアコーディオンの開閉をさせたいので、フラグとなる変数も用意します。
今回はロード完了時に1回取得するだけにしています。
もしも、アコーディオンの中身が動的に変わるようであれば、ボタンを押す毎に取得するようにしてください。

アコーディオンの開閉はごくごく簡単な仕組みで動かしています。
ボタンを押したらスライドさせるdivに中身と同じheightの数値を与えるだけです。先程指定したslideの中に、transitionを入れておけば、動きがアニメーションになります。
ボタンを押す毎にtrueとfalseが交互に切り替わるようになっています。これでdivのheightを切り替えています。

仕組みがわかれば特に難しくないので、jQueryが使えないけどアコーディオンメニューが使いたいときなどにちょっとこれを思い出してみてください。

今回は単純に1個だけのアコーディオンメニューをサンプルで作っただけですが、これをベースに色々改良していただければ、もっといい感じのものが出来ると思います。