ちわーす。
遊び心を、かっぱふぅ（ @kappafoo ）です。
今回はjQueryのtoggleメソッドを使ってアコーディオンメニューを設置する方法を記事にします。
cc licensed ( BY SA ) flickr photo shared by Remy Sharp
まず、アコーディオンメニューとは、見出しなどをクリックすると内容やリストなどが、アコーディオンのようにスラスラと出てくるメニューです。
また、再度クリックすると逆に隠れていくこともできます。
試しにこのサイトのサイドメニューの見出し部分をクリックしてみてください。
上の画像の「カレンダー」や「カテゴリー」の部分ですね。
どうです、クリックすると内容が隠れてましたか？．．．また、クリックすると出てきましたか？
この機能を実装するには、jQueryのtoggleメソッドを使います。
このtoggleメソッドは、$("要素").toggle();のように使用して、jQueryオブジェクトで指定した要素が表示されている時は隠し、隠れている時は表示するものです。
例えば…[js]$(“button”).click(function(){
$(“div”).toggle();
});[/js]と記載すれば、
buttonをクリックする度にdivで囲まれたモノを消したり表示したりすることができます。
このサイトのカレンダー部分は．．．
＜ＨＴＭＬ＞
カレンダー
の記述と、あとヘッダー部分に
＜ｊｓ＞[js]
[/js]が記述されています。
．．．あ、そうそうヘッダー部分でjQueryのファイルを読み込むのを忘れないように．．．
です。
jQuery1.8までは、toggleはクリック関数として、[js]
[/js]と書くことができました。
ネットで検索すると、このような記述の仕方がまだ出てきます。
しかし、最近のjQueryのバージョンである1.9以降では、この書き方ではまったく動きません。
これはtoggleクリック関数がjQuery 1.9で廃止されたことによります。
今後は、前述のtoggleメソッドで記述しておきましょう。
ちなみに、これまでのtoggleクリック関数をそのまま使う場合には、jQuery Migrate というjsを１つ追加すれば動きます。
つまり、jQueryのファイル
と、もうひとつjQuery Migrateのファイル
を読みこませるということです．．．これで、従来の方法でも動きますよ。
ということで、jQueryを使ったアコーディオンメニューについてでした。
参考にさせていただいたサイトは．．．
株式会社LIGさんの「超簡単jQuery！”toggle系メソッド”を使ってアコーディオンメニューやタブをさくっと実装する方法」
超簡単jQuery！”toggle系メソッド”を使ってアコーディオンメニューやタブをさくっと実装する方法 | 株式会社LIG
超簡単jQuery！”toggle系メソッド”を使ってアコーディオンメニューやタブをさくっと実装する方法 …
ポップスウエブ工房さんの「jQuery toggleクリック関数を使用しないアコーディオン」
POPS-WEB｜POPS WEB
jQuery toggleクリック関数を使用しないアコーディオン …
株式会社K2さんの「jQuery toggleの廃止と解決法」
jQuery toggleの廃止と解決法 | K2
jQuery toggleの廃止と解決法 …
です。
みなさんもアコーディオンメニューいかがですか。
