WEBサイトを作っていると、
- レスポンシブ表示時のグローバルメニューをボタンクリックで表示・非表示を切り替えたい
- Q&Aなどのページで、ボタンクリックで一部のテキストの表示・非表示を切り替えたい
- テキストや画像ブロックをクリックで表示・非表示を切り替えたい
といった、クリックで要素の表示・非表示の切り替えを行いたい機会が多々訪れます。
このような、クリックによる表示・非表示切り替え機能のことを「トグル（toggle）」と呼びます。
トグルには、
- 一瞬で表示が切り替わるもの
- フェードイン・フェードアウトで表示が切り替わるもの
- スライドイン・スライドアウトで表示が切り替わるもの
といった複数の種類があります。
ここでは、トグルを実現するための全ての手順を紹介していきます。
目次
【STEP1】jQueryライブラリの読み込み
トグルメニューを実現するためには、jQueryを利用します。
まずは、jQueryを利用するための下準備として、jQueryライブラリの読み込みを行う必要があります。
すでにjQueryライブラリが読み込まれている場合は次の【ステップ２】へ進んでください。
読み込みがまだの人は、以下の方法で読み込みを行いましょう。
自分のサイトのHTML（またはPHP）編集画面を開き、
<head>〜</head>の間に以下のどちらかの記述を行います。
自分のWEBサーバーにjQueryライブラリを配置した時
WEB上のjqueryライブラリを参照する時
自分のサーバー上にjQueryライブラリを設置する場合は、新しいバージョンのjQueryライブラリをダウンロードして使って下さい。
外部リンクjQuery公式サイトへのリンク
【STEP2】トグルで表示を切り替えたい部分にHTMLでプログラムを記述する
トグルで表示を切り替えたい部分に、HTMLプログラムを書いていきましょう。
ここでポイントとなるのが、
HTMLで記述する要素に、ID名をつけるということです。
後でjQueryプログラム上を書いていく際、
このIDを指定してトグルエフェクトを実行します。
プログラムの誤動作防止のため、
複数の要素を指定できるクラス名ではなく、唯一の要素を指定するID名をつけましょう。
HTML
上のサンプルは、「ID=slidetoggle_button」のボタンリンクをクリックすると、「ID=slidetoggle_menu」リストの表示・非表示を切り替えるためのHTML記述です。
【STEP3】トグルアクションを発生させるjQueryを記述する
トグルアクションを発生させるため、
先ほどhtmlで記述した要素IDに応じたjQueryコードを書く必要があります。
jQueryの既存関数である「slideToggle()」「toggleClass()」を使うことで、簡単にスライドトグルを実現できます。
jQuery
上のサンプルは、「ID=slidetoggle_button」のボタンリンクをクリックすると、「ID=slidetoggle_menu」リストの表示・非表示を切り替えるためのjQuery記述です。
こちらの内容でうまく動作しない場合、javascriptプログラムとjQueryプログラムが競合してしまっている可能性があります。
もし競合が起きてしまっている場合は、以下の記事を参考にしてみてくださいね
ちなみに、jQueryで使えるトグルの種類は以下の通りです。
自分の好きなエフェクトを選択しましょう。
| 関数名 | アニメーションの説明 |
|---|---|
| toggle() | デフォルト。 滅多に使うことがない拡張性がないアニメーション。 |
| slideToggle() | スライドイン・スライドアウト。 細かいアニメーション時間まで可能な拡張性が高く最も利用されるアニメーション。 |
| fadeToggle() | フェードイン・フェードアウト。 ふわっとメニューを表示させたいときに利用されるアニメーション。 |
記述例
また、「.slideToggle()」では、
引数にエフェクトの速さを指定することができます。
| 引数 | 引数の説明 |
|---|---|
| 引数なし | デフォルト（秒）の速さでスライドする。 |
| fast | 早めにスライドする。 |
| normal | 標準的な速さでスライドする。 |
| slow | 遅めにスライドする。 |
| 数字 | 指定したミリ秒でスライドする。 |
記述例
【STEP4】表示を切り替えるcssを記述する
jQueryのトグルアクションでは、
表示・非表示の切り替えを行う際に「active」クラスの付け外しを行なっています。
何も設定を行わなければ、一番初めはトグルメニューが表示されてしまうため、
最初はメニューを閉じておきたい時はCSSで非表示の記述を行います。
CSS
【STEP5】動作確認・調整
実際に動作確認を行い、デザイン等調整を行ってください。
【応用編】複数のトグルがあるケースでjQueryプログラムをシンプルにする方法
サブメニューのような複数の項目をトグルで表示する際、
上で紹介してきたIDを個別に指定したjQueryプログラムの書き方だと、
ソースコードがとても長く、汎用性が低いものになってしまいます。
この場合は、以下のように「指定したIDの次の要素をトグルする」プログラムで記述するとよいでしょう。
「メニュー」をクリックすると「内容」を表示するサブメニュー
jQueryをコンパクトにする記述
【応用編】上から降りてくるヘッダー固定のトグルメニューを作る
上で紹介してきたトグルの実装方法を応用すると、
以下のキャプチャのような、スマホ表示にも嬉しい「上から降りてくるヘッダー固定トグルメニュー」を作ることができます。
以下のページでは、それぞれ１列、２列、３列の時の実装方法をまとめています。
ぜひ参考にしてみてください。
以下はトグルではありませんが、
jQueryでメニューを横からスライドイン・スライドアウトさせる方法を紹介しています。興味がある方はこちらの記事も合わせてお読みくださいね。
【応用編】ハイクオリティなトグルQ&Aを作る方法
以下のページでは、ボタンクリックで回答の表示・非表示が切り替わるトグルQ&Aを紹介しています。
興味がある方はぜひ参考にしてみてくださいね。
