jQueryを利用したアコーディオン

jQueryを利用してアコーディオンを用意するサンプルです。使い勝手がよいようにシンプルな作りにしました。見出しをDT、中身をDDとして記述するため、HTMLのマークアップ的にも悪くないはずです。見た目はスタイルシートで自由にカスタマイズできます。

ひとつめ: 中身は何でも可。
ふたつめ
みっつめ: YouTubeで見かけたにゃんこ。

導入方法は簡単です。まずはHEAD要素内に以下の行を追加してjQueryを利用できるようにします。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

ここではGoogleからjQueryを読み込んでいますが、自分のWebサイトにjQueryを置いて、それを読み込ませるようにしても問題ありません。

アコーディオン部分は、jQueryを読み込ませた次の行へ以下のようにJavaScriptを記述してください。汎用性とメンテナンス性を考慮すれば、この部分は外部JavaScriptファイルにしておき、それを読み込ませたほうがよいでしょう。

<script type="text/javascript">
$(function() {
	$('dl.accordion>dd').hide();
	$('dl.accordion>dt.opened').nextUntil('dl.accordion>dt').show('slow');
	$('dl.accordion>dt').click(function(e) {
		$(this).toggleClass('opened');
		$(this).nextUntil('dl.accordion>dt').toggle('slow');
	});
});
</script>

class属性でaccordionをつけたDL要素直下のDD要素をいったんすべて非表示にして、class属性にopenedを指定したDT要素直後のDD要素を表示させています。あとはclickイベント発生時に表示／非表示を切り替えることでアコーディオンとして実装しました。アコーディオンで開くのをひとつだけにしたいという場合には、JavaScriptを2行追加して以下のようにすればOKです。

<script type="text/javascript">
$(function() {
	$('dl.accordion>dd').hide();
	$('dl.accordion>dt.opened').nextUntil('dl.accordion>dt').show('slow');
	$('dl.accordion>dt').click(function(e) {
		$('dl.accordion>dd').hide();
		$('dl.accordion>dt').removeClass('opened');
		$(this).toggleClass('opened');
		$(this).nextUntil('dl.accordion>dt').toggle('slow');
	});
});
</script>

開くのはひとつでも、全部閉じる状態も可能にしたいという場合のコードは以下のようになります。

<script type="text/javascript">
$(function() {
	$('dl.accordion>dd').hide();
	$('dl.accordion>dt.opened').nextUntil('dl.accordion>dt').show('slow');
	$('dl.accordion>dt').click(function(e) {
		$('dl.accordion>dt').not(this).removeClass('opened');
		$(this).toggleClass('opened');
		$('dl.accordion>dt').not(this).nextUntil('dl.accordion>dt').hide('slow');
		$(this).nextUntil('dl.accordion>dt').toggle('slow');
	});
});
</script>

なお、サンプル部分のHTMLは以下のように記述しています。

<dl class="accordion">
<dt class="opened">ひとつめ</dt>
<dd>中身は何でも可。</dd>
<dt>ふたつめ</dt>
<dd><img src="/img/losttechnology.png" alt="LostTechnology" width="136" height="40"></dd>
<dt>みっつめ</dt>
<dd><p>YouTubeで見かけたにゃんこ。</p>
<iframe src="http://www.youtube.com/embed/YZcbyTrEjiY" frameborder="0" width="640" height="390" title="YouTube video player" allowfullscreen></iframe></dd>
</dl>

記述しているJavaScript的には同一ページ内にclass属性でaccordionを指定したDL要素はいくつあっても大丈夫です。また、class属性にopenedを指定することで、DT要素に対応する内容は用途に合わせて必要な部分を初期状態で表示できるので、自由度は高くできたのではないかと思います。

一応、サンプルで指定しているスタイルシートも掲載しておきます。こちらも自由に指定して利用可能です。ただし、JavaScriptを無効にしている人のことを考慮して、スタイルシートでDD要素の初期状態を非表示にするのは避けてください。

dl.accordion dt {
	cursor:			pointer;
	color:			#fff;
	padding-left:		3em;
	background:		url(/img/icon/menu.open.gif) no-repeat left center #003;
	border-bottom:		solid 1px #ffe;
}
dl.accordion dt.opened {
	background:		url(/img/icon/menu.close.gif) no-repeat left center #007;
}

ブラウザはFirefox、Google Chrome、Internet Explorer 6/7/8/9、Operaを用いて表示を確認しました。