HOME >
JavaScript >
jQueryで要素の表示非表示を操作する方法【5通りの方法を...

JavaScript

jQueryで要素の表示非表示を操作する方法【5通りの方法を解説】

投稿日:2021年01月18日（最終更新日:2022年03月19日）

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

jQueryで要素の表示と非表示を切り替えるには？

WEBサイト制作では、ユーザーがボタンをクリックしたり、一定の位置までページをスクロールした時に要素を表示させたり非表示にしたり切り替えたい状況があります。

jQueryを使えば、ユーザーが特定のアクションをしたときに要素の表示と非表示を切り替える処理を作ることができます。

jQueryで要素の表示と非表示を切り替えるには、大きく分けて次の5つの方法があります。

css()メソッドを使う方法
show()メソッドとhide()メソッドを使う方法
fadeIn()メソッドとfadeOut()メソッドを使う方法
addClass()とremoveClass()メソッドを使う方法
toggleと各種toggleメソッドを使う方法

各メソッドそれぞれが持つ異なる特徴を理解して状況に応じて使い分ける必要があります。

ここでは実際に使用する頻度が高いクリックと連動して表示非表示を切り替える方法を例にして、各メソッドの使い方を説明していきます。

css()メソッドで表示非表示を切り替える

cssメソッドはjQueryを使ってCSSのプロパティを操作することができるメソッドです。

このメソッドを用いて、CSSのdisplayやvisibility、opacityといったプロパティを変更することで要素の表示非表示を切り替えます。

cssメソッドは以下のように記述します。表示非表示の切替だけでなくサイズや色などスタイルを操作したい時に使用します。

下記の例では、各ボタンのクリックによってvisibilityプロパティの値が変更され表示非表示が切り替わります。

HTML

<button id="btnShow">表示</button>
<button id="btnHide">非表示</button>
<div id="test1" class="test">ダミーテキスト1</div>

jQuery

$(function(){
    //表示非表示切替
    $("#btnHide").on("click",function(){
        $("#test1").css({
            "visibility":"hidden", 
        });
    });//
    $("#btnShow").on("click",function(){
        $("#test1").css({
            "visibility":"visible",
        });
    });//
    //
});//end function

プレビュー

jQueryのセレクターについて詳しくはこちらをご覧ください。

jQueryのセレクターの種類と使い方

jQueryのセレクターとは、操作したいHTML要素の特定に使うものです。セレクタ―で指定した要素に対して、メソッドを使って取得や変更などさまざまな操作を行うことができます...【もっと読む】

show()メソッドとhide()メソッドで表示非表示を切り替える

showメソッドは要素を表示させるメソッド、hideメソッドは要素を非表示にする為のそれぞれ専用のメソッドです。

前述のcssメソッドのようにスタイルを指定する必要はなく、記述するだけで要素は表示（もしくは非表示）状態になります。

それぞれ以下のように記述して使用します。

なお、デベロッパーツールなどでスタイルを確認するとCSSのvisibilityメソッドのvisibleとhiddenが操作されていることがわかります。

下記の例では、それぞれのボタンをクリックすることで表示非表示が切り替わります。

HTML

<button id="btnShow">表示</button>
<button id="btnHide">非表示</button>
<div id="test1" class="test">ダミーテキスト1</div>

jQuery

$(function(){
    //表示非表示切替
    $("#btnHide").on("click",function(){
        $("#test1").hide();
    });//
    $("#btnShow").on("click",function(){
        $("#test1").show();
    });//
});//end function

プレビュー

fadeIn()メソッドとfadeOut()メソッドで表示非表示を切り替える

それぞれ表示と非表示状態に切り替える専用メソッドである点はshowとhideと同じですが、こちらのメソッドはアニメーションでフェードしながら表示（もしくは非表示）状態に切り替わります。

以下のように記述します。fadeInメソッドはフェードしながら表示、fadeOutの方はフェードしながら非表示にします。

下記の例では、それぞれのボタンをクリックとフェードしながら表示非表示が切り替わります。

HTML

<button id="btnShow">表示</button>
<button id="btnHide">非表示</button>
<div id="test1" class="test">ダミーテキスト1</div>

jQuery

$(function(){
    //表示非表示切替
    $("#btnHide").on("click",function(){
        $("#test1").fadeOut();
    });//
    $("#btnShow").on("click",function(){
        $("#test1").fadeIn();
    });//
});//end function

プレビュー

addClass()とremoveClass()メソッドで表示非表示を切り替える

addClass()とremoveClass()は、要素に新しいクラスを追加したり、クラスを削除することができるメソッドです。

ここまで紹介したメソッドとは異なり、addClass(もしくはremoveClass)メソッド自体に表示非表示を操作する機能はありません。

あらかじめdisplayやvisibility、opacityで表示（もしくは非表示）を指定したクラスを用意しておき、対象の要素にそのクラス名を付け外しすることで表示非表示を操作します。

それぞれ以下のように記述して使用します。addClassで要素にクラスを付与、removeClassで要素からクラスを削除します。removeClassはaddClassで追加したクラスと元からHTMLで記述してあるクラスのどちらも削除することが可能です。

下記の例では、それぞれのボタンをクリックすると対象の要素にhiddenというクラスが付け外しされます。このhiddenというクラスをセレクターにしてopacityプロパティを指定しておくことで、要素の表示非表示が切り替わります。transformとtransitionも設定しているので横にスライドするエフェクトも実装できます。

HTML

<button id="btnShow">表示</button>
<button id="btnHide">非表示</button>
<div id="test1" class="test">ダミーテキスト1</div>

CSS

#test1{
    opacity:1;
    transform: translateX(0%);
    transition:linear 1s;
}
#test1.hidden{
    opacity:0;
    transform: translateX(-100%);
    transition:linear 1s;
}

jQuery

$(function(){
    //表示非表示切替
    $("#btnHide").on("click",function(){
        $("#test1").addClass("hidden");
    });//
    $("#btnShow").on("click",function(){
        $("#test1").removeClass("hidden");
    });//
});//end function

プレビュー

toggleと各種toggleメソッドで表示非表示を切り替える方法

toggleと名がつくメソッドは、ユーザーが特定の操作を行うたびに交互に処理を行うことができます。

前述までのメソッドでは表示と非表示それぞれにボタンを用意していましたが、toggleでは一つのボタンをクリックするだけで表示非表示を切り替えることが可能です。

（※条件分岐などを使えば前述のメソッドでも、ひとつのボタンで切り替える処理を作ることは可能です。）

toggleメソッドをはじめ、次の4つのメソッドが存在します。

toggle()メソッド
fadeToggle()メソッド
slideToggle()メソッド
toggleClass()メソッド

それぞれの違いについて説明していきます。

toggle()メソッドの使い方

toggleメソッドを使うと、要素の表示非表示を交互に切り替えることができます。

前述のshow()とhide()が一つにまとまって交互に実行されるようなメソッドです。以下のように記述して使用します。

下記の例では、ボタンをクリックするたびに表示と非表示が交互に切り替わります。

HTML

<button id="btnShowHide">表示/非表示</button>
<div id="test1" class="test">ダミーテキスト1</div>

jQuery

$(function(){
    //表示非表示切替
    $("#btnShowHide").on("click",function(){
        $("#test1").toggle();
    });//
});//end function

プレビュー

fadeToggle()メソッドの使い方

fadeToggleメソッドを使うと、要素の表示非表示をフェードするアニメーションとともに交互に切り替えることができます。

こちらは、前述のfadeIn()とfadeOut()がひとつになったようなメソッドです。下記のように記述します。フェードしながら切り替わりが完了するまでの時間をミリ秒で設定することができます。

次の例では、ボタンをクリックするたびに1秒掛けてフェードしながら表示非表示が切り替わります。

HTML

<button id="btnShowHide">表示/非表示</button>
<div id="test1" class="test">ダミーテキスト1</div>

jQuery

$(function(){
    //表示非表示切替
    $("#btnShowHide").on("click",function(){
        $("#test1").fadeToggle(1000);
    });//
});//end function

プレビュー

slideToggle()メソッドの使い方

slideToggleメソッドを使うと、要素の表示非表示を上下にスライドするアニメーションとともに交互に切り替えることができます。

下記のように記述します。スライドしながら切り替わりが完了するまでの時間をfadeToggleメソッドと同様にミリ秒で設定することができます。

次の例では、ボタンをクリックするたびに0.5秒掛けてスライドしながら表示非表示が切り替わります。

HTML

<button id="btnShowHide">表示/非表示</button>
<div id="test1" class="test">ダミーテキスト1</div>

jQuery

$(function(){
    //表示非表示切替
    $("#btnShowHide").on("click",function(){
        $("#test1").slideToggle(500);
    });//
});//end function

プレビュー

slideToggle()メソッドを使えばアコーディオンメニューを簡単に作ることが可能です。詳しくはこちらをご覧ください。

jQueryでアコーディオンメニューを作る方法

アコーディオンメニューはjQueryのslideToggleというメソッドを使用すれば簡単に作成することができます。slideToggleメソッドは、クリックするたびに要素の表示非表示を上下にスライドアニメーションさせながら切り替えを行います...【もっと読む】

toggleClass()メソッドの使い方

toggleClassメソッド使うと

addClass()とremoveClass()がひとつにまとまったようなメソッドで、こちらも表示（もしくは非表示）を設定したスタイルを用意しておくことで切替を行います。

toggleClassメソッドは以下のように記述します。記述してあるクラス名の付与と削除が交互に実行されます。

下記の例では、ボタンをクリックすると対象の要素にhiddenというクラスが付け外しされます。hiddenクラスにはあらかじめopacityとtransform、transitionを指定しているのでアニメーションしながら切り替わります。

HTML

<button id="btnShowHide">表示/非表示</button>
<div id="test1" class="test">ダミーテキスト1</div>

CSS

#test1{
    opacity:1;
    transform: translateX(0%);
    transition:linear 1s;
}
#test1.hidden{
    opacity:0;
    transform: translateX(-100%);
    transition:linear 1s;
}

jQuery

$(function(){
    //表示非表示切替
    $("#btnShowHide").on("click",function(){
        $("#test1").toggleClass("hidden");
    });//
});//end function

プレビュー

まとめ

WEBサイトやWEBサービスで使われる機能には表示非表示の切替を伴うものが多くあるため、今回紹介したメソッドの理解は必須と言っても過言ではありません。jQueryによる切替操作を使いこなせれば、新しいデザインやエフェクトなど表現の幅も広がります。

HTML/CSSブロックコーディングデザインをすらすら再現できる

1冊ですべて身につくJavaScript入門講座