jQuery【 CSS 】display を使用した表示・非表示に関するサンプル

jQuery では、CSS で display プロパティを設定して HTML 要素の表示・非表示を切り替えることができます。
また、hide メソッドやshow メソッド、visibility プロパティを使用して HTML 要素の表示・非表示を切り替えることもできます。
今回は、jQuery で HTML 要素の表示・非表示を切り替えるサンプルについて、解説いたします。

jQuery を使用した CSS の設定方法等については、以下のページもご参照下さい。
jQuery【 CSS 】スタイルを動的に変更する
jQuery【 CSS 】colorとfontを変更するサンプル
jQuery【 CSS 】addClass、removeClass を使ってCSSを変更するサンプル
jQuery【 CSS 】toggleClass を使ってCSSの切り替えを行うサンプル
jQuery【 CSS 】プロパティの値を取得するサンプル
jQuery【 CSS 】!important で優先度を変更するサンプル
jQuery【 CSS 】hover でカーソルが当たった時の処理を実現するサンプル
jQuery【 CSS 】display を使用した表示・非表示に関するサンプル（本ページ）

1. display で表示・非表示

　
jQuery で CSS の display プロパティを変更して、HTML 要素の表示・非表示を切り替えます。
各ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#nonBtn").click(function() {
    // 非表示に設定
    $("#pinkBox").css("display", "none");
  });
  $("#blockBtn").click(function() {
    // 表示に設定
    $("#pinkBox").css("display", "block");
  });
  $("#nonBtn2").click(function() {
    // 非表示に設定
    $("#purpleBox").css("display", "none");
  });
  $("#blockBtn2").click(function() {
    // 表示に設定
    $("#purpleBox").css("display", "block");
  });
  $("#nonBtn3").click(function() {
    // 非表示に設定
    $("#blueBox").css("display", "none");
  });
  $("#blockBtn3").click(function() {
    // 表示に設定
    $("#blueBox").css("display", "block");
  });
});
//-->
</script>

<div style="background-color:#CCC; display:inline-flex; align-items: center; ">

<div style="display:inline-block; vertical-align: middle;">
  <div id="pinkBox" style="background-color:pink; height:70px">　</div>　
  <input type="button" id="nonBtn" value="非表示">　
  <input type="button" id="blockBtn" value="表示">
</div>
　
<div style="display:inline-block; vertical-align: middle;">
  <div id="purpleBox" style="background-color:orchid; height:70px">　</div>　
  <input type="button" id="nonBtn2" value="非表示">　
  <input type="button" id="blockBtn2" value="表示">
</div>
　
<div style="display:inline-block; vertical-align: middle;">
  <div id="blueBox" style="background-color:skyblue; height:70px">　</div>　
  <input type="button" id="nonBtn3" value="非表示">　
  <input type="button" id="blockBtn3" value="表示">
</div>

</div>

▲目次へ戻る

2. hide と show で表示・非表示

　
今度は hide メソッド と show メソッドを使って、上のサンプルと同様の動き（ HTML 要素の表示・非表示の切り替え ）を行います。
各ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#hideBtn").click(function() {
    // 非表示に設定
    $("#pinkBox").hide();
  });
  $("#showBtn").click(function() {
    // 表示に設定
    $("#pinkBox").show();
  });
  $("#hideBtn2").click(function() {
    // 非表示に設定
    $("#purpleBox").hide();
  });
  $("#showBtn2").click(function() {
    // 表示に設定
    $("#purpleBox").show();
  });
  $("#hideBtn3").click(function() {
    // 非表示に設定
    $("#blueBox").hide();
  });
  $("#showBtn3").click(function() {
    // 表示に設定
    $("#blueBox").show();
  });
});
//-->
</script>

<div style="background-color:#CCC; display:inline-flex; align-items: center;">

<div style="display:inline-block; vertical-align: middle;">
  <div id="pinkBox" style="background-color:pink; height:70px">　</div>　
  <input type="button" id="hideBtn" value="非表示">　
  <input type="button" id="showBtn" value="表示">
</div>
　
<div style="display:inline-block; vertical-align: middle;">
  <div id="purpleBox" style="background-color:orchid; height:70px">　</div>　
  <input type="button" id="hideBtn2" value="非表示">　
  <input type="button" id="showBtn2" value="表示">
</div>
　
<div style="display:inline-block; vertical-align: middle;">
  <div id="blueBox" style="background-color:skyblue; height:70px">　</div>　
  <input type="button" id="hideBtn3" value="非表示">　
  <input type="button" id="showBtn3" value="表示">
</div>

</div>

▲目次へ戻る

3. visibility で表示・非表示

　
display プロパティや hide メソッドを使用したサンプルは HTML 要素を非表示にした場合に 要素分のスペースが削除されましたが、visibility プロパティを使用するとスペースを確保したまま HTML 要素が非表示となります。
次のサンプルでは、jQuery で CSS の visibility プロパティを変更して、HTML 要素の表示・非表示を切り替えます。
各ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#hidBtn").click(function() {
    // 非表示に設定
    $("#pinkBox").css("visibility", "hidden");
  });
  $("#visiBtn").click(function() {
    // 表示に設定
    $("#pinkBox").css("visibility", "visible");
  });
  $("#hidBtn2").click(function() {
    // 非表示に設定
    $("#purpleBox").css("visibility", "hidden");
  });
  $("#visiBtn2").click(function() {
    // 表示に設定
    $("#purpleBox").css("visibility", "visible");
  });
  $("#hidBtn3").click(function() {
    // 非表示に設定
    $("#blueBox").css("visibility", "hidden");
  });
  $("#visiBtn3").click(function() {
    // 表示に設定
    $("#blueBox").css("visibility", "visible");
  });
});
//-->
</script>

<div style="background-color:#CCC; display:inline-flex; align-items: center; ">

<div style="display:inline-block; vertical-align: middle;">
  <div id="pinkBox" style="background-color:pink; height:70px">　</div>　
  <input type="button" id="hidBtn" value="非表示">　
  <input type="button" id="visiBtn" value="表示">
</div>
　
<div style="display:inline-block; vertical-align: middle;">
  <div id="purpleBox" style="background-color:orchid; height:70px">　</div>　
  <input type="button" id="hidBtn2" value="非表示">　
  <input type="button" id="visiBtn2" value="表示">
</div>
　
<div style="display:inline-block; vertical-align: middle;">
  <div id="blueBox" style="background-color:skyblue; height:70px">　</div>　
  <input type="button" id="hidBtn3" value="非表示">　
  <input type="button" id="visiBtn3" value="表示">
</div>

</div>

▲目次へ戻る

4. まとめ

jQuery で HTML 要素の表示・非表示を切り替えるサンプルについて、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る