【jQuery】ボタンクリックで要素の表示・非表示を切り替える

こんにちは、Ryohei（@ityryohei）です！

本記事では、jQueryでボタンをクリックして要素の表示と非表示を切り替える方法をご紹介しています。

ボタンで要素の表示を切り替えたいんだけど、良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

本記事で作成するもの

本記事では、ボタンをクリックして要素の表示・非表示を切り替える処理を作成します。下記のデモのような内容となります。Switch Buttonと表示されたボタンをクリックすると要素の表示が切り替わります。

See the Pen 1291 by ryohei (@intotheprogram) on CodePen.

要素の表示・非表示の切り替えはボタンのクリックだけではなく、読み込みやマウスオーバーといった他のイベントにも応用が利きますので、覚えておくと何かと便利です。

では実際に処理を作っていきたいと思います。

jQueryを読み込む

本記事では、スクリプトにjQueryを使用します。jQueryは処理の記述の前に本体を読み込む必要がありますので、CDNを利用してjQueryを読み込んでおきます。

CDNというのはContents Delivery Network(コンテンツ・デリバリー・ネットワーク)の略称で、ネットワークを経由してウェブコンテンツを利用するサービスを指します。ネットワークに接続されている機器であれば利用することができます。

jQueryの本体ファイルは下記のscriptタグで読み込むことができます。

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>

本体の読み込みができたら、処理を作成していきましょう。

show()とhide()について

今回、要素の表示・非表示の切り替えはshow()とhide()というメソッドを使用して実現します。それぞれ下記のような機能を持ったメソッドになります。

show()

show()は指定した要素を表示状態にするメソッドです。実行すると、要素のstyle属性（指定したHTMLの要素にstyle="*"を埋め込む）にdisplay:blockを追加します。

もし、show()で指定した要素にvisibility:hidden等が適用されていた場合は表示されませんのでご注意下さい。

show()を実行する場合は下記のように記述します。

$(selector).show();

上記例では、selectorに指定した要素にshow()を実行し、要素を表示状態にします。

hide()

hide()は指定した要素を非表示状態にするメソッドです。実行すると、要素のstyle属性にdisplay:noneを追加します。

hide()を実行する場合は下記のように記述します。

$(selector).hide();

上記例では、selectorに指定した要素にhide()を実行し、要素を非表示状態にします。

show()とhide()の基本的な使い方は以上となりますが、両メソッドにはオプションがあり、引数に文字列や数値を指定すると要素を表示・非表示の際のスピードを変更するができます。スピードの変更方法についても指定方法も併せてご紹介したいと思います。

show()とhide()のスピードを指定する

show()とhide()で表示・非表示にする際、スピードを設定することができます。設定できる値は下記の通りです。

slow

$(selector).show('slow');

normal

$(selector).show('normal');

fast

$(selector).show('fast');

ミリ秒(例:1000)

$(selector).show(1000);

slow～fastの順に表示スピードが速くなります。もっと細かく指定したい場合はミリ秒を使用すると良いでしょう。

クリックで要素の表示・非表示を切り替える

ここまでで要素の表示・非表示を切り替えるのに必要なメソッドはご紹介できましたので、これらを使用して冒頭のデモを実装していきます。

HTML

デモで使っているHTMLです。ボタンがクリックされた際にelement1とelement2の表示・非表示を切り替えます。

<div id="app">
  <button class="button">Switch Button</button>
  <div class="element1">element1</div>
  <div class="element2">element2</div>
</div>

JS

デモで使っているjQueryのスクリプトです。実行している処理につきましてはコメントを参考にしていただければ幸いです。

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(document).ready(function(){
    //デフォルトで表示する要素を指定
    $('.element1').show();
    $('.element2').hide();

    //buttonがクリックされたら処理を実行
    $('.button').click(function () {

         //toggleClassでshowのclassを追加または削除
        $('#app').toggleClass('show');

        //#appがshowのclassをを持っていれば
        if($('#app').hasClass('show')){

             //要素の表示を切り替える
            $('.element1').hide();
            $('.element2').show();
        }else{

             //要素の表示を切り替える
            $('.element1').show();
            $('.element2').hide();
        }
    });
});
</script>

Copy & Paste

さくっと実装したい方向けに全体のソースをまとめたものです。コピペで動作しますので、土台にご活用ください！

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script>
$(document).ready(function(){
    //デフォルトで表示する要素を指定
    $('.element1').show();
    $('.element2').hide();

    //buttonがクリックされたら処理を実行
    $('.button').click(function () {

         //toggleClassでshowのclassを追加または削除
        $('#app').toggleClass('show');

        //#appがshowのclassをを持っていれば
        if($('#app').hasClass('show')){

             //要素の表示を切り替える
            $('.element1').hide();
            $('.element2').show();
        }else{

             //要素の表示を切り替える
            $('.element1').show();
            $('.element2').hide();
        }
    });
});
</script>

<!-- CSS -->
<style>
#app {
    width: 96%;
    max-width: 500px;
    margin: 40px auto;
    padding: 28px;
    border: 1px solid #ffffff;
    border-radius: 5px;
    box-shadow: 2px 2px 5px 0px rgba(200, 200, 200, 1);
}

.element1{
    width: 100%;
    height: 200px;
    color: #ffffff;
    background: #384878;
}

.element2{
    width: 100%;
    height: 200px;
    color: #ffffff;
    background: #00c2bc;
}

button {
    margin: 0 0 20px 0;
}
</style>

<!-- HTML -->
<div id="app">
  <button class="button">Switch Button</button>
  <div class="element1">element1</div>
  <div class="element2">element2</div>
</div>