jQueryのslideToggleをVanilla JSとCSSで書いてみる

こんにちは、むったん（@6ttan）です。

アコーディオンを実装する際、jQueryのslideToggleってすごい活躍しますよね！
ただjQueryはあまり使用したくない案件の時に限って、slideToggle()使いたいのにーっ！があったりする現実。

ということで、今回は素のJS（Vanilla JS）とCSSを利用してslideToggleを再現してみようと思います。

jQueryとJSで再現

ではそれぞれ書いてみて比較してみようと思います。

jQueryの場合

See the Pen
Untitled by むったん (@6ttan)
on CodePen.0

ざっと説明すると、「アコーディオン」をクリックしたら初期で隠れている部分がクリックごとに開閉します。
ついでに「アコーディオン」の右側のマークを + ⇄ – としたいので、toggleClassで.is-openを付け外しをしています。

JS+CSSの場合

See the Pen
アコーディオン（JS+CSS） by むったん (@6ttan)
on CodePen.0

まず「アコーディオン」クリックしたら部分は4行目ですね。

btn.addEventListener('click', function(){})

jQueryでは「アコーディオン」の右側のマークを変更するのにtoggleClassを使用していましたが、JSでは

btn.classList.toggle('is-open');

これで.is-openを付け外しをしています。

重要な開閉動作は以下になります。

el.classList.toggle('is-open');
if(el.classList.contains("is-open")){
  el.style.height = el.scrollHeight + 'px';
}else{
  el.style.height = "0";
}

該当部分は初期状態で高さ0pxですが、.is-openが付与されることで要素の中身の高さを取得し付与します。

ちなみにcssでは

.accordion__content {
    border: solid #B0D9D5;
    border-width: 0 1px 1px 1px;
    padding: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    transition: all 0.5s;
}

transitionがヌルヌルっとした開閉動作をしてくれる部分になります。

【余談】JSのみで再現する場合 ※コードなし

昔これをJSのみで再現しようとして調べたことがあります。
紹介ページが見つからないのでコードはありませんが、cssの「transition」部分のアニメーションを再現するのがとても大変みたいで。
ズラーーっとJSが書いてあったことを記憶しています。

それを見てしまうと、cssの「transition」を使用するだけでこんなにコードを短くできるのかと感動しています。