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

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

投稿日:

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

カテゴリー記事のアイキャッチ画像
広告
広告

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

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

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

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

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

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

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

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

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

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

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

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

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

showとhideメソッドの書き方

なお、デベロッパーツールなどでスタイルを確認すると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の方はフェードしながら非表示にします。

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で記述してあるクラスのどちらも削除することが可能です。

addClassとremoveClassメソッドの書き方

下記の例では、それぞれのボタンをクリックすると対象の要素に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()が一つにまとまって交互に実行されるようなメソッドです。以下のように記述して使用します。

toggleメソッドの書き方

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

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()がひとつになったようなメソッドです。下記のように記述します。フェードしながら切り替わりが完了するまでの時間をミリ秒で設定することができます。

fadeToggleメソッドの書き方

次の例では、ボタンをクリックするたびに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メソッドと同様にミリ秒で設定することができます。

slideToggleメソッドの書き方

次の例では、ボタンをクリックするたびに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メソッドは以下のように記述します。記述してあるクラス名の付与と削除が交互に実行されます。

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による切替操作を使いこなせれば、新しいデザインやエフェクトなど表現の幅も広がります。

広告
広告

関連する記事

サムネイル

JSでセレクト値が変更されたらフォームを送信を実行する方法【……

2024年07月02日
ユーザーがセレクトボックスの値を変更したタイミングでフォームの送信を実行するという処理を実装する機会があったので、その方法を備忘録として残しておきます。
サムネイル

JSでチェックボックスの全選択全解除を行う方法【すべて選択】

2024年07月02日
フォームのチェックボックスの数が多いときにあると便利な、ワンクリックで全選択や全解除できる機能をJavaScriptで作る機会があったので、その方法を備忘録として残します。
サムネイル

JSで配列の重複チェックを行う【Setオブジェクトを利用】

2024年07月02日
JavaScriptで配列の中に重複する値が存在するか判定したい状況があり、その時に調べたことを備忘録として残しておきます。今回は単純に重複しているかどうかだけ分かればよかったので、「Setオブジェクト」を使って重複チェックを行う方法を選びました。
サムネイル

JSのkeyup･keydown･keypressの違い【キ……

2024年06月13日
JavaScriptの「keyup」「keypress」「keydown」はいずれもユーザーのキーボードイベントを処理したい時に使用します。それぞれ処理が発火するタイミングなどに違いがあるので、用途に応じた使い分けが必要です。
サムネイル

JSでテキストボックスに入力された値を即時取得する【this……

2024年06月13日
ユーザーがinputのテキストボックスに入力した値をJavaScriptを使って即時取得して処理させたい状況がありましたので、その方法を備忘録として残しておきます。
サムネイル

JavaScriptで偶数と奇数を判定する方法【テーブルの行……

2024年05月16日
ある数値が偶数か奇数かは、「数値を2で割って余りが0なら偶数」「数値を2で割って余りが0でなければ奇数」という方法で判別を行います。
サムネイル

JSで郵便番号検索を実装できるライブラリ【yubinbang……

2024年04月12日
yubinbango.jsは郵便番号検索（郵便番号を打ち込むと住所が自動入力される）機能を簡単に実装できるのライブラリです。一実装方法がとても簡単なのでメールフォームなどに手軽に郵便番号検索機能を導入したい方におすすめです。