jQuery style 変更 display

jQueryで要素の表示・非表示を切り替える方法まとめ

jQueryを使って要素の表示・非表示を切り替える方法は複数あります。この記事では、 `show()` 、 `hide()` 、 `toggle()` 、 `css('display', ...)` など、それぞれの方法の特徴や使い分け、注意点などを詳しく解説し、サンプルコードも交えながら分かりやすく説明します。

1. `show()` と `hide()` で表示・非表示

  • `show()`: 非表示状態の要素を表示状態にする
  • `hide()`: 表示状態の要素を非表示状態にする
  • アニメーション効果なしで、瞬時に切り替える

<button id="button1">表示</button>
<button id="button2">非表示</button>
<p id="target1" style="display: none;">表示する要素</p>
<p id="target2">非表示にする要素</p>

<script>
  $("#button1").click(function() {
    $("#target1").show();
  });

  $("#button2").click(function() {
    $("#target2").hide();
  });
</script>

2. `toggle()` で表示・非表示をワンクリックで切り替え

  • 要素の現在の表示状態に応じて、表示と非表示を切り替える
  • ボタン一つで表示・非表示を切り替えたい場合に便利

<button id="button3">切り替え</button>
<p id="target3">表示・非表示を切り替える要素</p>

<script>
  $("#button3").click(function() {
    $("#target3").toggle();
  });
</script>

3. アニメーション効果を加えて表示・非表示

  • `show()` 、 `hide()` 、 `toggle()` に速度やeasingを指定してアニメーション効果を追加
  • より滑らかな表示・非表示の切り替えを実現

<button id="button4">アニメーション表示</button>
<p id="target4" style="display: none;">アニメーションで表示する要素</p>

<script>
  $("#button4").click(function() {
    $("#target4").show('slow'); // または 'fast' や ミリ秒
  });
</script>

4. `css('display', ...)` で柔軟な表示・非表示制御

  • `display` プロパティを直接操作して、`block`, `inline`, `inline-block`, `none` などを設定
  • 要素の種類やレイアウトに合わせて、より細かい表示制御が可能

<button id="button5">非表示</button>
<button id="button6">ブロック表示</button>
<p id="target5">非表示にする要素</p>
<p id="target6" style="display: none;">ブロック表示する要素</p>

<script>
  $("#button5").click(function() {
    $("#target5").css('display', 'none'); 
  });

  $("#button6").click(function() {
    $("#target6").css('display', 'block'); 
  });
</script>

5. 表示状態の確認

  • `is(':visible')` と `is(':hidden')` で要素が表示状態か非表示状態か判定
  • 条件分岐などに活用

<p id="target7">表示状態を確認する要素</p>

<script>
  if ($("#target7").is(":visible")) {
    // 表示状態の場合の処理
    console.log("表示されています"); 
  } else {
    // 非表示状態の場合の処理
    console.log("非表示です");
  }
</script>

まとめ

jQueryには要素の表示・非表示を切り替えるための様々な方法が用意されています。状況や用途に合わせて適切な方法を選ぶことで、より効果的で表現力豊かなウェブサイトを作成することができます。

参考資料

よくある質問

質問 回答
`show()` と `fadeIn()` の違いは何ですか？ `show()` は瞬時に要素を表示しますが、 `fadeIn()` は指定した時間で徐々に要素を表示します。アニメーション効果の有無が異なります。
複数の要素を同時に表示・非表示を切り替えたい場合はどうすれば良いですか？ jQueryのセレクタを使用して、複数の要素をまとめて指定することができます。例えば、`$(".target").show();` のように記述すると、class="target"の要素が全て表示されます。
表示・非表示の切り替え時に、他の要素のレイアウトが崩れてしまう場合はどうすれば良いですか？ `display` プロパティを `visibility` プロパティに変更するか、CSSの `position` プロパティなどを調整することで、レイアウトの崩れを防ぐことができます。

その他の参考記事:jquery style 削除