jQueryのslideToggleをJavaScriptに書き換える

2025年3月26日

はじめに

jQueryのslideToggleメソッドは、要素の表示・非表示をスライドアニメーションで切り替える便利な関数です。しかし、最近では純粋なJavaScript（Vanilla JS）で同様の機能を実装することが推奨されることが増えてきました。

この記事では、slideToggleの動作をJavaScriptで再現する方法を解説します。

`slideToggle`の動作

jQueryでslideToggleを使うと、以下のように簡単に要素の表示・非表示をスライドアニメーションで切り替えられます。

$("#toggleButton").click(function() {
    $("#content").slideToggle();
});

このコードをJavaScriptだけで実装する方法を見ていきましょう。

JavaScriptで`slideToggle`を実装

CSSでトランジションを設定

まず、CSSでアニメーションの基礎を作ります。

#content {
    overflow: hidden;
    transition: max-height 0.5s ease-out;
    max-height: 0;
}

#content.active {
    max-height: 500px; /* 適切な高さに調整 */
}

JavaScriptでトグル機能を実装

次に、JavaScriptでクリック時にmax-heightを変更する処理を記述します。

document.getElementById("toggleButton").addEventListener("click", function() {
    let content = document.getElementById("content");
    if (content.style.maxHeight && content.style.maxHeight !== "0px") {
        content.style.maxHeight = "0px";
    } else {
        content.style.maxHeight = content.scrollHeight + "px";
    }
});

解説

max-heightを0pxに設定し、overflow: hidden;を適用して隠す。
ボタンがクリックされたとき、要素のmax-heightをscrollHeight（実際の高さ）に変更。
CSSのtransitionを活用してスムーズなスライドを実現。

まとめ

jQueryのslideToggleをJavaScriptだけで再現する方法を解説しました。CSSのtransitionを利用し、max-heightを動的に変更することで、スムーズなスライドアニメーションを実装できます。

今後は、できる限りVanilla JSを活用し、軽量でパフォーマンスの良いコードを書いていきましょう。