jQueryを使ったアコーディオン

Category：Javascript
Date：2010年6月 5日

テキストや画像などをクリックすると隠れていたコンテンツがでてくるアコーディオンのサンプルをjQueryを使って作成しました。もっと汎用的なものが他にあると思いますが、検索で調べるものは自分には複雑だったりするので・・・

HTML

とりあえずサンプルで用意したHTMLのソースはこちら

<dl class="accordionList">
<dt>ここを押すと内容がスライドして表示</dt>
<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
<dt>ここを押すと内容がスライドして表示</dt>
<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
<dt>ここを押すと内容がスライドして表示</dt>
<dd>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>

Javascript

そしてこちらがJavascriptの記述。jQueryを使ってますので、こちらのソースを読み込ませる前にjQueryを読み込んで下さい。


$(function(){
	//カーソルを指マークにする
	$(".accordionList dt").hover(function(){
		$(this).css("cursor","pointer"); 
	},function(){
		$(this).css("cursor","default"); 
	});	   
	$(".accordionList dd").hide();//表示を隠す
	$(".accordionList dt").click(function() {//クリックしたら
		$(this).next("dd").slideToggle("slow");//その次の要素を表示させる
	});
});

実行結果

動作の様子が以下になります。

ここを押すと内容がスライドして表示: テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
ここを押すと内容がスライドして表示: テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
ここを押すと内容がスライドして表示: テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト

補足説明

サンプルはdlで作成していますが、dl以外を使用する場合それに対応している箇所を修正して使えるかと思います。$(".accordionList dt")あたり
クリックする要素と表示する要素は隣り合った要素になっていないと動きません

HTML

Javascript

実行結果

補足説明

関連記事を読む