【jQuery】toggle()で要素の表示と非表示を切り替える!

要素の表示と非表示を切り替えるにはjQueryのtoggle()を使用します。

jQueryのtoggle()とは要素の表示と非表示を交互に切り替えるメソッドであり、Web上では「表示したいもの、非表示にしたいもの」に使用します。

例えば、サイトで「+」ボタンを押した時に、詳細内容がサッと表示されたり、「-」ボタンを押すとサッと戻酢ような場合にtoggle()メソッドで実装することができます。

また、現在のjQueryのパージョンでは廃止されていますが、toggle()メソッドでイベント処理を切り替える機能をプラグインのjQuery-Migrateを使用することで復元することができます。

今回は、jQueryのtoggle()メソッドを使って要素の表示と非表示を切り替える方法について以下の内容で解説していきます。

⚫︎ 要素の表示と非表示を瞬時に切り替える場合
⚫︎ 要素の表示と非表示をアニメーションをつけて切り替える場合
⚫︎ 要素を表示状態や非表示状態にする場合

⚫︎ toggle()でイベント処理を切り替える方法

ハルトさん

今回はjQueryのtoggle()メソッドを使って要素の表示と非表示を切り替える方法について説明していきます。

さとみさん

はい!
お願いします!

toggle()とは

toggle()とは要素の表示と非表示を交互に切り替えるメソッドとなります。

toggle()の書き方

toggle()メソッドの書き方は下記となります。

パラメータ

⚫︎ duration:
アニメーションの時間を指定する。デフォルトは400ms。
(ミリ秒で指定するか、「”fast”」「”slow”」の文字を指定する。)
⚫︎ easing:
動きを指定する。デフォルトは「”swing”」
⚫︎ complete:
アニメーション処理完了後に呼び出す関数を指定する。
(デフォルトは指定無し)
⚫︎ step:
アニメーションのステップ(間隔)を数値で指定する。
⚫︎ queue:
処理をキューに入れるかどうかを指定する。デフォルトは「true」
(「true」なら入れる。「false」なら入れない)
⚫︎ specialEasing:
動きの指定をCSSプロパティごと別々に指定する

要素の表示と非表示を切り替えを行うサンプルコード

toggle()メソッドで要素の表示と非表示を切り替えを行うサンプルコードを紹介します。

要素の表示と非表示を瞬時に切り替える場合

要素の表示と非表示を瞬時に切り替える場合はtoggle()メソッドの引数を指定しないでtoggle()メソッドを呼び出します。

sample.html

style.css

index.js

出力結果

toggle()メソッドによって、指定した要素が表示と非表に切り替えることができます。
そのため、ボタンを押すと、sampleクラスの要素が消えたり、表示されたりしています。

要素の表示と非表示をアニメーションをつけて切り替える場合

要素の表示と非表示をアニメーションをつけて切り替える場合はtoggle()メソッドの引数に切り替え速度を文字列で指定します。

sample.html

style.css

index.js

出力結果

toggle()メソッドの引数に切り替え速度を指定することで、要素の表示と非表示をアニメーションをつけて切り替えています。
そのため、ボタンを押すと、sample1クラスでは速めに、sample2クラスは4秒かけて要素の表示と非表示の切り替えが行われています。

さとみさん

toggle()メソッドの()に切り替え速度を文字列で指定すると、アニメーション付きで要素の表示と非表示の切り替えを行うことができるのですね!

ハルトさん

そうですね。
単純に遅くしたい場合は「slow」を設定し、単純に速くしたい場合は「fast」を指定してあげると良いと思います。
また、時間を指定したいのであれば、ミリ秒単位(1000ms=1秒)で指定してあげると良いですよ。

要素を表示状態や非表示状態にする場合

要素を表示状態や非表示状態にする場合はtoggle()メソッドの引数に真偽値を指定します。

sample.html

style.css

index.js

出力結果

toggle()メソッドの引数に真偽値を指定することで要素が表示状態や非表示状態になります。
そのため、ボタンを押すと、sample1クラスの要素は表示されたままで、sample2クラスの要素は表示されなくなります。

さとみさん

toggle()メソッドの引数に真偽値を指定すると、表示や非表示状態を維持することになるのですね!

ハルトさん

そうですね。
toggle()メソッドの引数に真偽値を指定することで要素が表示や非表示状態になります。
そのため、切り替えを行うことができませんので注意しましょう。

toggle()でイベント処理を切り替える方法

toggle()メソッドは要素の表示と非表示を切り替えるだけでなく、押した時にイベント処理を切り替えることもできます。
しかし、この機能はjQuery1.9以降から廃止されたので現在のjQuerynのバージョンでは使用することができません。

その為、jQuery Migrateというプラグインを使用することでtoggle()のイベントを切り替える機能を復元させることができます。

sample.html

style.css

index.js

出力結果

jQuery Migrateを使用することでtoggle()メソッドでイベントを切り替えています。
その為、要素をクリックすると背景色が変化します。

今回のポイント

toggle()で要素の表示/非表示を切り替える

⚫︎ 要素の表示と非表示を切り替えるにはjQueryのtoggle()メソッドを使用する

⚫︎ 要素の表示と非表示を瞬時に切り替える場合はtoggle()メソッドの引数を指定しないで呼び出す

⚫︎ 要素の表示と非表示をアニメーションをつけて切り替える場合はtoggle()メソッドの引数に切り替え速度を文字列で指定する

⚫︎ 要素を表示状態や非表示状態にする場合はtoggle()メソッドの引数に真偽値を指定する

⚫︎ jQuery Migrateを使用することでtoggle()メソッドのイベントを切り替える機能を復元することができる
(この機能はjQuery1.9から廃止された)

関連記事

jQueryのtoggleClass()メソッドでクラスを切り替える方法についてはこちらをご参考ください。

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し