jQueryのhideの反対は？

jQueryで要素を非表示にする「hide()」メソッドはよく知られていますが、その反対、つまり非表示にした要素を再び表示するにはどうすればよいのでしょうか？

答えはズバリ、「show()」メソッドです！

「show()」でHTML要素を表示する方法

「hide()」が要素を非表示にするメソッドなのに対して、「show()」は要素を表示することができます！使い方は簡単で、「hide()」と同様に、表示したい要素に対して「show()」メソッドを実行するだけです。

<p id="sample">このテキストは表示されます。</p>
<button id="hideButton">隠す</button>
<button id="showButton">表示</button>

<script>
$(document).ready(function(){
  $("#hideButton").click(function(){
    $("#sample").hide();
  });
  $("#showButton").click(function(){
    $("#sample").show();
  });
});
</script>

上記は、ボタンをクリックすると要素を非表示/表示する簡単なサンプルです。

「show()」メソッドのオプション

「show()」メソッドは、表示速度を調整するオプションを指定することもできます。

オプション	説明
"slow"	ゆっくりと表示します。
"fast"	素早く表示します。
数値 (ミリ秒)	指定したミリ秒かけて表示します。

$("#showButton").click(function(){
  $("#sample").show("slow"); // ゆっくり表示
});

参考資料

<a href="https://api.jquery.com/show/">jQuery.show() | jQuery API Documentation</a>

よくある質問

Q1: 「hide()」と「show()」以外に要素を表示/非表示にする方法はありますか？

A1: はい、「fadeIn()」「fadeOut()」「slideDown()」「slideUp()」など、アニメーション効果を伴う表示/非表示メソッドも用意されています。

Q2: 「show()」メソッドで非表示にした要素は、元の位置に表示されますか？

A2: はい、元の位置に表示されます。「show()」メソッドは、要素の表示プロパティを操作するだけで、レイアウトを変更するものではありません。

Q3: 「show()」メソッドを実行しても要素が表示されない場合は？

A3: 考えられる原因としては、要素のCSSで「display: none;」が指定されている、または別のJavaScriptコードによって非表示状態が維持されているなどが考えられます。

その他の参考記事:jquery display 切り替え