• 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のセレクターとは、操作したい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

プレビュー

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

関連する記事

サムネイル

Javascriptのlightboxライブラリの使い方【画……

2023年10月01日
最終更新日:2023年09月12日
lightboxライブラリでできること Webサイトでは、ユーザーがクリックすると大きい画像が開くという表示方法が良く用いられます。 一覧では小さい画像を並べて […]
サムネイル

HTMLのチェックボックスに選択上限を設ける方法【Javas……

2023年10月01日
最終更新日:2023年09月28日
チェックボックスに選択上限を設けるには、JavaScriptを使ってチェックの数をカウントし設定した数を超えたらチェックできないようにします。
サムネイル

横スクロール可能なことを示すヒントを表示するJavascri……

2023年09月01日
Javascriptのライブラリ「ScrollHint(スクロールヒント)」を使えば、ユーザーに対して要素がスクロール可能であることをわかりやすく示すアイコンを表示することができます。
サムネイル

JavascriptでブラウザやOSを判定する方法【plat……

2023年09月01日
Javascriptのplatform.jsというライブラリを利用すれば、簡単にユーザーが使用しているブラウザやOS情報を取得し判別する処理を作ることが可能です。
サムネイル

Javascriptでフォーム送信時に確認ダイアログを出す方……

2023年09月01日
Javascriptでフォーム送信時にダイアログ表示させてユーザーに処理を続行して良いか確認するには「confirmメソッド」と「onsubmit属性」の2つを使用します。
サムネイル

Javascriptで文字のUnicode(UTF-16)を……

2023年09月01日
最終更新日:2023年08月29日
JavascriptのcharCodeAtを使うと、日本語(テキスト)のUnicode(UTF-16)を取得したり、Unicode(UTF-16)をテキストに変換することが可能です。
サムネイル

jQueryのblurでフォーカスが外れた時の処理を行う方法……

2023年05月01日
最終更新日:2023年05月31日
jQueryのblur()メソッドはフォームの入力ボックスなどでフォーカスが外れたときに処理を実行させることができるメソッドです。