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

要素のクラスを追加するにはjQueryのtoggle()メソッドを使用します。

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

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

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

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

ハルトさん

今回はjQueryのtoggle()メソッドについて説明していきます。

さとみさん

はい!
お願いします!

toggle()とは

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

toggle()の書き方

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

toggle()の引数に切り替え速度を文字列で指定し、toggle()メソッドを呼び出すことで、指定した要素の表示と非表示を切り替えを行うことができます。

また、$の()の要素にはタグ名や、クラス名、id名を指定します。

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

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()で要素のクラスを追加する

⚫︎ 要素のクラスを追加するにはjQueryのtoggle()メソッドを使用する

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

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

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

関連記事

Writer
壷井

壷井

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

最新の案件情報

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