jQuery入門 | エフェクト効果 | 要素の表示と非表示 .hide() .show() .toggle()

要素の表示と非表示

.hide()メソッドは選択した要素を瞬時に消し、.show()メソッドは表示する。

メソッド	説明
.hide()	選択した要素を消す。
.show()	選択した要素を表示する。
.toggle()	選択した要素に`.show()`メソッドと`.hide()`メソッドを交互に適用する。

.hide()メソッドで隠された要素は、CSSのdisplayプロパティ値をnoneに設定して非表示にする。.show()メソッドでは、隠された要素のCSSのdisplayプロパティ値をblockに設定して表示する。

$("#btnHide").on("click", function() {
  $("div").hide();
});
$("#btnShow").on("click", function() {
  $("div").show();
});

上の例では、<div>要素を.hide()メソッドで隠し、.show()メソッドで表示している。

CSSのvisibilityプロパティ値をhiddenに設定してもHTML要素を隠すことができる。
ただし、この場合は見えないだけで、隠された要素は依然としてWebページのレイアウトに影響を与える。

引数にミリ秒（ms）を指定したり、"slow"、"fast"のような予約語を渡したりして、エフェクト効果の速度を設定することもできる。

$("#btnHide").on("click", function() {
  $("div").hide(1000);
});
$("#btnShow").on("click", function() {
  $("div").show("fast");
});

上の例では、.hide()メソッドと.show()メソッドに効果の速度を設定している。

jQueryには、選択した要素の現在の表示状態に応じて異なる動作をする.toggle()メソッドがある。選択した要素が現在消えている状態であれば.show()メソッドの動作を実行し、表示されている状態であれば.hide()メソッドの動作を実行する。

$("#btnToggle").on("click", function() {
  $("div").toggle();
});

上の例では、idがbtnToggleである要素をクリックすると、<div>要素が交互に表示されたり隠れたりする。