jQueryでdisplayプロパティを変更する方法【show() hide() toggle()】

今回の記事は、

  • jQueryを使ってdisplayプロパティを変更したい
  • jQueryを使って要素の表示/非表示を簡単に実装したい
  • 素のJavascriptでのやり方は知ってるけどjQueryでのやり方は知らない

という方に向けた記事になっています。


レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

jQueryを使ってdisplayプロパティを変更する方法

jQueryを使ってdisplayプロパティを変更するには、css()メソッドを使用します。

こちらの記事(jQueryでcssを変更する方法【style属性/class属性を変更】)でも詳しく解説しておりますが、css()メソッドの基本的な使い方は以下の通りです。

基本的な使い方

$(セレクタ).css("プロパティ", "値")

こちらの「プロパティ」の部分にdisplayを設定してあげれば大丈夫です。

それでは早速、実際の実装例を見ながら確認していきましょう。

実装コード

<p id="test-text1">テストテキスト</p>

<button onClick="showText1()">テキストを表示</button>
<button onClick="hideText1()">テキストを非表示</button>

<script>
function showText1() {
  $("#test-text1").css("display", "block")
}

function hideText1() {
  $("#test-text1").css("display", "none")
}
</script>

動作確認用

テストテキスト

上記では、「テキストを表示」ボタンを押すとdisplayプロパティをblockに設定し、「テキストを非表示」ボタンを押すとdisplayプロパティをnoneに設定するよう実装しています。

このように、非常に簡単にdisplayプロパティを変更できるのですが、実はjQueryにはさらに便利なメソッドが用意されているのです。

それは、show()メソッドとhide()メソッドです。

show() / hide()メソッドを使って要素を表示/非表示する方法

jQueryにはdisplayプロパティを専門に扱うメソッドが存在しており、それがshow()メソッドとhide()メソッドになります。

その名前からもお分かりの通り、show()メソッドを使うとdisplayプロパティをblockに、hide()メソッドを使うとdisplayプロパティをnoneに設定してくれます。

基本的には引数は取らず、jQueryオブジェクトに対して直接呼び出すだけで大丈夫です。

基本的な使い方

$(セレクタ).show() or hide()

それでは実際の実装例を見ながら確認していきましょう。

実装コード

<p id="test-text2">テストテキスト</p>

<button onClick="showText2()">テキストを表示</button>
<button onClick="hideText2()">テキストを非表示</button>

<script>
function showText2() {
  $("#test-text2").show()
}

function hideText2() {
  $("#test-text2").hide()
}
</script>

動作確認用

テストテキスト

このように、show()/hide()メソッドを使用すると、css()メソッドを使うよりもかなり簡潔にdisplayプロパティを変更することができますよね。

しかし、このようにしてshow()hide()を繰り返す場合には、toggle()メソッドという、もっと便利なものが用意されているのです。

toggle()メソッドを使って要素を表示/非表示する方法

先ほども申し上げました通り、show()hide()を繰り返す場合には、このtoggle()メソッドを使用した方が効率的です。

似たようなメソッドとして、toggleClass()メソッドがあったと思いますが、使い方や機能はほとんど同じです。
(「なんだっけ?」と思われた方は、こちらの記事(jQueryでclassを追加する方法【addClass()とtoggleClass()】)やこちらの記事(jQueryでclassを削除する方法【removeClass()とtoggleClass()】)をご覧くださいね。)

このtoggle()メソッドも、show()/hide()メソッドと同じ形でjQueryオブジェクトに対して直接呼び出す形で大丈夫です。

基本的な使い方

$(セレクタ).toggle()

それでは実際の実装例を見ながら確認していきましょう。

実装コード

<p id="test-text3">テストテキスト</p>

<button onClick="showOrHideText()">テキストを表示/非表示</button>

<script>
function showOrHideText() {
  $("#test-text3").toggle()
}
</script>

動作確認用

テストテキスト

このtoggle()メソッドは、要素が表示されている場合には非表示に非表示の場合には表示してくれるという、とても便利はメソッドなのです。

要素の表示/非表示を切り替えるボタンを2つ用意したり、条件分岐を書く必要がなくなりますので、ぜひとも覚えておいておきたいですね。

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまで、jQueryを使ってdisplayプロパティを変更する方法について解説してきましたがいかがでしたか?

実際の開発でも頻繁に登場する技術ですので、ぜひこの機会に覚えておいてくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。