toggle()

説明補足説明コードコメント投稿

このサンプルは、jQueryのtoggle()メソッドを使用してhtml要素を可視/不可視状態に交互に切り替えます。サンプルの[Toggle]ボタンをクリックするとメッセージが切り替わります。

このサンプルは、jQueryのtoggle()メソッドを使用してhtml要素を可視/不可視状態に交互に切り替えます。サンプルの[Toggle]ボタンをクリックするとメッセージが切り替わります。

html要素を可視/不可視に切り替えるには、jQueryのtoggle()メソッドを使用します。このメソッドは、現在可視状態になっているhtml要素を不可視、不可視状態になっている要素を可視状態に切り替えます。「Hello!」が宣言されているp要素は可視状態、「Welcome...」が宣言されているp要素が不可視状態になっていますのでtoggle()を実行すると「Hello!」が不可視、「Welcome...」が可視状態に切り替わります。 

$("#btnToggle").click(function() {
  $("p").toggle();
});   

<p>Hello!</p>
<p class="hide">Welcome to jQuery...</p>