jQuery hideとshow：動的な表示・非表示

hide()とshow()メソッドはウェブページの動的な表示・非表示の制御において重要な役割を果たします。

クリックして表示・非表示

hide()メソッド

hide()メソッドは、指定したHTML要素を非表示にします。

$("p").hide();

上記のコードは、すべての<p>要素を非表示にします。

show()メソッド

逆に、show()メソッドは、指定したHTML要素を表示します。

$("p").show();

上記のコードは、すべての<p>要素を表示します。

hide()とshow()を組み合わせる

これらのメソッドを組み合わせることで、ユーザーの操作に応じてコンテンツを表示・非表示するといった動的なウェブページを作成することが可能です。

$("#hideButton").click(function(){
  $("p").hide();
});

$("#showButton").click(function(){
  $("p").show();
});

上記のコードは、IDがhideButtonの要素がクリックされたら<p>要素を非表示にし、IDがshowButtonの要素がクリックされたら<p>要素を表示します。