【jQuery】表示・非表示にはtoggleを利用で簡単解決

HTML要素の表示・非表示を切り替えたい場合には、toggle()メソッドを利用することで、簡単に実現することができます。

toggle()メソッド：サンプルソース

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>toggleサンプル</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#toggleButton").click(function(){
                $("#myDiv").toggle();
            });
        });
    </script>
</head>
<body>
    <button id="toggleButton" style="padding:3px; 5px;color:blue;">表示/非表示</button>
    <div id="myDiv" style="width: 400px; height: 100px; background-color: lightblue;">
        ここがトグルで表示・非表示されます
    </div>
</body>
</html>

実行結果：toggle()メソッド

toggleサンプル

ここがトグルで表示・非表示されます

スピードやアニメーションの設定

toggle() は、表示・非表示の切り替えをアニメーション付きで行うこともできます。例えば、速度を指定したり（ミリ秒単位または"slow"や"fast"といったプリセット値）、コールバック関数を使うことも可能です。

$("#myDiv").toggle(1000); // 1秒かけてトグル

コールバック関数の使用例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>toggleコールバックサンプル</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#toggleButton2").click(function(){
                $("#myDiv2").toggle(1000, function(){
                    alert("アニメーションが完了しました！");
                });
            });
        });
    </script>
</head>
<body>
    <button id="toggleButton2" style="padding:3px; 5px;color:blue;">表示/非表示</button>
    <div id="myDiv2" style="width: 400px; height: 100px; background-color: lightblue;">
        ここがトグルで表示・非表示されます
    </div>
</body>
</html>

実行結果：コールバック関数等

toggleコールバックサンプル

ここがトグルで表示・非表示されます