WEBサイトを作っていると、

 

  • レスポンシブ表示時のグローバルメニューをボタンクリックで表示・非表示を切り替えたい
  • Q&Aなどのページで、ボタンクリックで一部のテキストの表示・非表示を切り替えたい
  • テキストや画像ブロックをクリックで表示・非表示を切り替えたい

 

といった、クリックで要素の表示・非表示の切り替えを行いたい機会が多々訪れます。

このような、クリックによる表示・非表示切り替え機能のことを「トグル(toggle)」と呼びます。

トグルには、

 

  • 一瞬で表示が切り替わるもの
  • フェードイン・フェードアウトで表示が切り替わるもの
  • スライドイン・スライドアウトで表示が切り替わるもの

 

といった複数の種類があります。

 

ここでは、トグルを実現するための全ての手順を紹介していきます。

 

【STEP1】jQueryライブラリの読み込み

トグルメニューを実現するためには、jQueryを利用します。

まずは、jQueryを利用するための下準備として、jQueryライブラリの読み込みを行う必要があります。

 

すでにjQueryライブラリが読み込まれている場合は次の【ステップ2】へ進んでください。

読み込みがまだの人は、以下の方法で読み込みを行いましょう。

 

自分のサイトの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をコンパクトにする記述

 

【応用編】上から降りてくるヘッダー固定のトグルメニューを作る

上で紹介してきたトグルの実装方法を応用すると、
以下のキャプチャのような、スマホ表示にも嬉しい「上から降りてくるヘッダー固定トグルメニュー」を作ることができます。

 

 

以下のページでは、それぞれ1列、2列、3列の時の実装方法をまとめています。
ぜひ参考にしてみてください。

 

 

以下はトグルではありませんが、
jQueryでメニューを横からスライドイン・スライドアウトさせる方法を紹介しています。興味がある方はこちらの記事も合わせてお読みくださいね。

 

 

【応用編】ハイクオリティなトグルQ&Aを作る方法

 

以下のページでは、ボタンクリックで回答の表示・非表示が切り替わるトグルQ&Aを紹介しています。
興味がある方はぜひ参考にしてみてくださいね。

 

 

 

おすすめの記事