jQueryのtoggle()メソッドの使い方を徹底解説！基本構文からアニメーション実装まで

jQueryのtoggle()メソッドは、照明のスイッチのようなものだと考えると分かりやすいでしょう。呼び出されると、選択した要素を「オン」または「オフ」に切り替えます。つまり、要素をユーザーに表示したり非表示にしたりする動作を切り替えるのです。この記事では、ボタンがクリックされたときにtoggle()を使ってテキストを表示・非表示にする方法を解説します。

jQuery toggle()とは？

jQueryのtoggle()メソッドは、Webページ上で選択された要素を表示または非表示にするメソッドです。その名前の通り、照明のスイッチのように要素の表示を「オン」「オフ」に切り替える働きをします。通常はHTMLのボタンと組み合わせて使われますが、実際にはどの要素に対しても呼び出すことが可能です。

表示の「オン」「オフ」を切り替える機能に加えて、jQueryのtoggle()はアニメーションの継続時間（duration）を引数として受け取ることができます。duration引数には数値または文字列を指定でき、durationを指定すると指定した時間だけ続くアニメーションが作成されます。

さらに、toggle()はアニメーション完了時に実行されるコールバック関数も受け取れます。コールバック関数とは、後で実行されるために別の関数へ渡される関数のことです。引数が何も指定されていない場合、toggle()は単に表示を「オン」または「オフ」に切り替えるだけです。

それでは、基本構文を確認した後、サンプルコードで詳しく見ていきましょう。サンプルコードでは、画像とテキストを切り替えるアニメーションを扱います。

toggle()の基本構文

はじめに述べたように、jQueryのtoggle()メソッドはデフォルトでは照明のスイッチのような働きをします。クリックされると、選択された要素の表示を「オン」または「オフ」に切り替えます。すべてのjQueryメソッドと同様に、toggle()を呼び出す前に要素を選択しておく必要があります。

まず、引数なしでtoggle()を使う例を見てみましょう。HTMLファイルは以下の通りです。

<button>
Click me
</button>
<p>
Read me!
</p>
<p id="hide" style="display: none">
NO! Read ME!
</p>

このHTMLファイルは、ボタン1つと段落タグ2つを表示しています。id「hide」が付いた<p>タグのstyle属性に注目してください。displayをnoneに設定すると、その段落要素は画面上から非表示になります。

HTMLファイルは予想通りに表示されています。次に、jQueryのtoggleを使って、非表示の<p>タグを表示してみましょう。この例では、jQueryコードをHTMLファイル内に記述します。そのためには、jQueryを<script>タグで囲む必要があります。

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

すべてのjQueryメソッドと同様に、まず要素を選択する必要があります。ここではbutton要素を選択し、click()メソッドを呼び出しています。click()メソッドは、選択されたボタンにイベントリスナーを登録するようなものです。ボタンがクリックされるとコールバック関数が呼び出され、toggle()メソッドが実行されます。jQueryのclick()について詳しくは、公式ドキュメントをご参照ください。

実際のコードの動作を見てみましょう。

ボタンをクリックすると、非表示だった段落タグが表示されました。toggle()の構文に慣れたところで、次はアニメーションを使った例を見ていきましょう。

toggle()を使ったアニメーション実例

ここまで、toggle()で選択した要素を表示・非表示にする方法を見てきました。次は、少し複雑なアニメーションの例を見てみましょう。心配いりません。ほとんどの概念は前のセクションで説明済みです。

この例では、ボタン、画像、<p>タグで囲まれたテキストを表示します。HTMLファイルは次のようになります。

<button>
Click me
</button>
<img id="cat" src="https://images.pexels.com/photos/2256259/pexels-photo-2256259.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"> 
<p style="display: none">
Animation Complete
</p>

ここでも、display属性の値により段落要素は非表示になっています。

猫の画像がボタンと一緒に表示されています。<p>タグのstyle属性が「display: none」に設定されているため、テキストは隠れたままです。次に、ボタンがクリックされたときに、画像をゆっくりと非表示にしてテキストを表示してみましょう。

jQuery toggleのduration引数には、数値または文字列を指定できます。数値の場合、その値はミリ秒を表します。文字列の場合、toggle()は「fast」（200ミリ秒）または「slow」（600ミリ秒）を受け付けます。

例えば、画像をゆっくり非表示にしたいので、toggle()の引数に「slow」を使用します。最初の例と同様に、jQueryをHTMLファイルの下部にあるscriptタグで囲みます。

<script>
$('button').click(function() {
  $('#cat').toggle('slow', function() {
    $('p').toggle();
  })
})
</script>

ボタンを選択してclick()を呼び出した後、最初のコールバック関数で猫の画像を非表示にします。toggle()に文字列「slow」を渡すことで、さらに別のコールバック関数を渡すことができます。このコールバック関数は、600ミリ秒が経過した後に実行されます。

「slow」の時間が経過すると、段落要素を「オン」に切り替えます。これで<p>タグがユーザーに表示されます。

gifを見ると、画像が非表示になるまでに少し時間がかかり、その後すぐにテキストに置き換わっているのが分かります。toggle()のさまざまな使い方を組み合わせることで、わずか数行のコードで動的なアニメーションを作成できました。

まとめ

この記事では、jQueryのtoggle()とは何か、どのような働きをするのかを解説しました。その後、基本構文とサンプルコードを確認し、学んだ内容を組み合わせて、画像を使った簡単なアニメーションを作成しました。

jQueryのtoggle()に慣れたら、次のプロジェクトで要素の表示切り替えを試してみてください。ボタンがクリックされたときに画像へアニメーションを追加することもできます。jQueryのtoggle()についてさらに詳しく知りたい場合は、公式ドキュメントを参照してください。それでは、楽しいコーディングを！