ここではjQueryを使ったアコーディオンメニューの作り方について見ていきます。
コンテンツ
slideToggleメソッドを使ったアコーディオンメニューの作り方
アコーディオンメニューの開閉の動きを実装するためには、slideToggleメソッドを使います。
まずは、超シンプルなサンプルをご覧ください。
ボタンで表示を切り替えてご覧ください。
See the Pen toggle01 by kenichi (@ken81) on CodePen.
今回は、dl要素を使ってこれ以上ないくらいシンプルなメニューを作りました。上の「メニュー」のところをクリックしてみてください。上記の仕組みとその展開についてこれから見ていきますが、jQueryのことをほとんど知らない方は下記の記事から読んでいただくとスムーズに理解できると思います。
$(function(){
$('.toggle').on('click', function() {
$(this).next('.content').slideToggle();
})
});
上記がjQueryのソースコードです。この内のon('click', function())という部分は、要素がクリックされたときに処理を実行するために使うお決まりの書き方です。骨組みだけ取り出すと下記のようになります。
$(function(){
$('セレクタ').on('click', function() {
//セレクタをクリックしたら処理したい内容
})
});
「セレクタ」のところにクリックイベントと関連付けたい要素を入れて、「セレクタをクリックしたら処理したい内容」のところにメニューを開閉する処理を記入します。
隣接する兄弟要素を指定：.next()
.next()は、隣接する（直後にある）兄弟要素を指定できます。
$(セレクタ１).next(セレクタ２)
このように書くと、「セレクタ１の直後にある（隣接している）セレクタ２」を指定できます。
今回の例では、
$(this).next('dd').slideToggle();
とありますので、$(this)（つまり、.toggle dt）の直後に来るdd要素に対していslideToggleメソッドを実行ということになります。
メニューを開閉させる：slideToggleメソッド
アコーディオンメニューで使用されているslideToggleメソッドは、スライドダウンとスライドアップをするためのメソッドです。指定した要素が閉じている状態（非表示）のときは、スライドダウンして開き、開いているときはスライドアップして閉じるという動きをします。
slideToggleメソッドは下記のように使います。
$(セレクタ).slideToggle(スピード);
「スピード」のところには、メニューが開閉するスピードを'slow', 'normal', 'fast'、もしくは数字（ミリ秒）で指定できます。空欄でもかまいません。
下記は、開閉のスピードをそれぞれ'slow', 'normal', 'fast',500で設定したサンプルです。クリックしてスピードをご覧ください。
See the Pen toggle_speed by kenichi (@ken81) on CodePen.
アコーディオンの複数メニュー
先ほどのアコーディオンメニューは、メニューが１つしかありませんでしたが、もちろんメニューは複数設定できます。
See the Pen toggle02 by kenichi (@ken81) on CodePen.
それぞれのメニューをクリックしてみてください。複数のメニューが開きっぱなしになっています。他のメニューを開いているときは、他のメニューが閉じるように設定したい場合は下記のようにします。
開くメニューをひとつだけにしたアコーディオンメニュー
See the Pen toggle03 by kenichi (@ken81) on CodePen.
$('dd').not($(this).next('dd')).slideUp();というコードを１行追加して、複数のメニューをクリックした場合にクリックしていないメニューを自動で閉じるように設定しました。使用したメソッドは下記の通りです。
除外する要素：.not(セレクタ)
.not(セレクタ)は、セレクタとして指定されたものを除外します。ここでは、「dd要素のうちクリックしたdt要素と隣接した要素でないもの」という意味になります。これに対してslideUpメソッドを適用しています。
メニューを閉じる：slideUpメソッド
slideUpメソッドは「閉める」動きだけを実装させるメソッドです。下から上へ、消えていくような動きを付けます。
以上をまとめると、「メニューのうちクリックしたメニューと隣接したコンテンツでないものを閉じる」設定をしたことになります。
開いているメニューにクラス名を追加
開いているメニューだけにクラス名を追加して、スタイルシートでデザインを入れたいときは下記のようにします。実際にメニューいくつかクリックしてみてください。
See the Pen toggle04 by kenichi (@ken81) on CodePen.
$(this).siblings('dt').removeClass('active');
$(this).toggleClass("active");
これは、上記２行のコードを追加しました。それぞれのメソッドを見てみましょう。
兄弟要素を指定：.siblings('セレクタ')
.siblings('セレクタ')は、兄弟要素を指定するメソッドです。$(this).siblings('dt')という形でクリックされたメニュー（dt要素）の兄弟要素（つまり他のメニュー）を指定しています。
クラス名を削除：.removeClass('クラス名')
.removeClass('クラス名')は、付けられているクラス名を削除します。$(this).siblings('dt').removeClass('active');でクリックされたメニューの兄弟要素（つまり他のメニュー）から「active」というクラス名を削除します。
クラス名の追加と削除：.toggleClass("クラス名")
.toggleClass("クラス名")は、指定したクラス名がなければ追加し、あれば削除するというメソッドです。メニューを１回クリックしたときにクラス名を付けて、もう一度クリックしたときに削除することができます。
以上の方法で開いているメニューのみにクラスを追加することができます。
