jQueryで要素の表示・非表示を切り替える方法【サンプル有】

2019年8月4日

jQueryの要素の操作において、要素の表示・非表示は割とよく使います。

今回はjQueryの表示・非表示を操るshow,hide,toggleメソッドについてまとめました。

show,hide,toggleの使い方

各メソッドは、それぞれこのような役割を持っています。

show 要素を表示する
hide 要素を非表示する
toggle 要素を非表示なら表示に、表示中なら非表示に切り替える

各メソッドは、$(対象の要素).行いたい処理()で記述します。

//要素を表示する
$('.test').show();

//要素を非表示にする
$('.test').hide();

//要素の状態を切り替える　表示⇔非表示
$('.test').toggle();

ボタンで表示・非表示を操作してみよう

では実際に、各種メソッドを触れて確認してみてください。

それぞれのメソッドを実行できる下記のサンプルコードと実行結果を用意しました。
直接クリックしてみると、メソッドの操作が分かりやすいと思います。

サンプルコード
<img class="sample1" width="50" height="50" src="https://kinocolog.com/wp-content/uploads/2019/07/apple.png">

<input type="button" class="btn_ex11" value="show/要素を表示">
<input type="button" class="btn_ex12" value="hide/要素を非表示">
<input type="button" class="btn_ex13" value="toggle/要素を切り替え">

<script>
$(function(){
    $('.btn_ex11').click(function(){
        $('.sample1').show();
    });
    $('.btn_ex12').click(function(){
        $('.sample1').hide();
    });
    $('.btn_ex13').click(function(){
        $('.sample1').toggle();
    });
});
</script>

また、メソッドの引数（カッコ内）に数値を入れておくことで、指定した数値（1000＝1秒）の時間をかけて変化します。

//1秒かけて非表示になる
$('.sample1').hide(1000);

非表示の仕様を知っておこう

非表示にするhide()は、指定した要素に「display:none」を付与しています。

つまり、cssの要素を非表示にするdisplay:noneプロパティを付与して、非表示にしているわけですね。

<img style="display: none;" class="sample1" width="50" height="50" src="https://kinocolog.com/wp-content/uploads/2019/07/apple.png">

show()は、そのdisplay:noneを置き換え、本来設定されていたdisplayプロパティの値を再設定します。

表示か非表示かを判定する方法

では次に、指定した要素が表示か非表示かを判定する記述を見てみます。

先ほど、非表示の要素はdisplay:noneが付与された要素、と説明しました。

つまり、調べたい要素のcssの「display」プロパティが「none」であれば非表示、それ以外であれば表示扱いの要素であることが分かりますね。

//.test要素は表示か非表示か判定したい場合の処理
if($('.test').css('display') !== 'none'){
    //表示時の処理
}else{
    //非表示時の処理
}

上記以外の記述方法では、フィルターを使った判定も行えます。

非表示かどうかの判定を行いたい場合は.is(‘:hidden’)、表示かどうかの判定を行いたい場合は.is(‘:visible’)が使用できます。

if($('.test').is(':hidden')){
    //非表示時の処理
}

if($('.test').is(':visible')){
    //表示時の処理
}

先ほど紹介したサンプルに、表示／非表示の判定を出すアラートを付けた実行例を用意しましたので、実際に触ってご確認ください。

サンプルコード
<img class="sample2" width="50" height="50" src="https://kinocolog.com/wp-content/uploads/2019/07/apple.png">

<input type="button" class="btn_ex21" value="show/要素を表示">
<input type="button" class="btn_ex22" value="hide/要素を非表示">
<input type="button" class="btn_ex23" value="toggle/要素を切り替え">
<input type="button" class="btn_ex24" value="表示／非表示の判定">

<script>
$(function(){
    $('.btn_ex21').click(function(){
        $('.sample2').show();
    });
    $('.btn_ex22').click(function(){
        $('.sample2').hide();
    });
    $('.btn_ex23').click(function(){
        $('.sample2').toggle();
    });
    $('.btn_ex24').click(function(){
        if($('.sample2').is(':visible')){
            alert('現在は「表示」です。');
        }else{
            alert('現在は「非表示」です。');
        }
    });
});
</script>

jQueryで要素を操作する際は割とよく使うメソッドなので、記述と仕様を覚えておきましょう。

以上、jQueryで要素の表示・非表示を切り替える方法、でした。

jQuery