jqueryでアコーディオンメニューを自作する

司馬遼太郎を読むというサイトを運営してるんですが、各ページのコンテンツが非常に多く、縦に長いページになってしまっているので、アコーディオンメニューを導入してみました。

javascriptのアコーディオンメニューは探せばいくらでもあると思いますが、今回も勉強のために自作します。
というか、簡単なものであれば自作したほうが後々のメンテナンスが楽だと思います。

とりあえずググってこちらのページを見つけました。参考にさせていただきました。

http://coder.blog.uhuru.co.jp/js/easy_accordion

$('.accordion_head').click(function() {
$(this).next().slideToggle();
}).next().hide();

ソースはこんな感じ↑。非常にシンプルです。


これをベースに少し改良を加えてみました。

$('.accordion_head').click(function() {
$(this).siblings('.accordion_body:not(:animated)').slideToggle("normal",function(){ $(this).siblings('.accordion_head').toggleClass('accordion_head_opened'); });
}).siblings('.accordion_body').hide();

修正点は

・DOMの構造が違ったので、自分のサイト用にセレクタを修正
・アコーディオンが開いている時と閉じている時でそれぞれマイナスアイコンとプラスアイコンを表示
・アニメーションが終わったタイミングでマイナス/プラスアイコンの表示を切り替え
・「:not(:animated)」を加えることで多重アニメーション防止

といったところです。

実際に動いているものはこちらのページ等で確認できます。
http://shiba-ryo.net/contents/144/%E7%87%83%E3%81%88%E3%82%88%E5%89%A3

ちなみにこのページ、ブログパーツ等の読み込みに時間がかかります。
「$(document).ready(...」の中に処理を記述すると読み込みがすべて完了するまでアコーディオンが動かないので、コンテンツのすぐ後にスクリプトを設置しました。