jQueryベースでプラグインを使わずにアコーディオンコンテンツを実装してみる

このブログも記事が増えてきました。
カテゴリページなんかでは、すぐに目的の記事を探し出せるように一覧化したい一方で、MTで概要をそのまま並べるとどんどん冗長になっていきます。

そこで、今回、アコーディオンを実装してみました。

どこからかライブラリを拾ってこようと思ったのですが、jQueryで実装すると簡単みたいだったので、自作してみました。

前提として、以下のようなHTMLコーディングだったとします。

<div class="accordion">
<div class="title"><h2>タイトル</h2><img src="img.gif" alt="開閉ボタン" width="20" height="20" /></div>
<div class="outline">
概要概要概要概要概要概要概要概要
</div>
<div class="title"><h2>タイトル</h2><img src="img.gif" alt="開閉ボタン" width="20" height="20" /></div>
<div class="outline">
概要概要概要概要概要概要概要概要
</div>
<div class="title"><h2>タイトル</h2><img src="img.gif" alt="開閉ボタン" width="20" height="20" /></div>
<div class="outline">
概要概要概要概要概要概要概要概要
</div>
</div>

「開閉ボタン」をクリックすると、概要の部分がアコーディオン風に開閉する。そのようなプログラムをjQueryで実装すると以下のようになります。

$('.accordion').each(function(){
	// 開閉ボタン画像毎に処理を繰り替えす
	$('.title > img', this).each(function(i){
		// 初期状態として一番目の概要はオープン
		if(i != 0){
			$(this).parent().next().hide();
		}
		// クリック時のイベント登録
		$(this).click(function(){
			// とりあえずみんな閉じる
			$(this).parent().parent().find('.outline').slideUp("normal");
			// クリックされた部分をオープン
			$(this).parent().next().slideDown("normal");
		});
	});
});

こんな少量のコードで実現できるなんてjQueryってすばらしいですね。
ちなみに、上の例のようにeach内のfunctionに変数「i」を設定すると、繰り返す毎にカウントしてくれるみたいです。初めて知りました。

こちらのコードは、本ブログサイトのカテゴリ毎の記事一覧ページにて組み込んであります。
もう少し改良の余地はありそうだな。。。