クリックで開閉する定義リストで作るアコーディオンパネル

デモページへopen_in_new

JSを読み込みます

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slidepanel.js"></script>

[slidepanel.js]JavaScript

$(function(){
	$("#slidepanel dd").addClass("close");
	$("#slidepanel dt").addClass("open").attr({title:"ここをクリックしてパネルを開きます。"});
	$("#slidepanel dt").click(function(){
		if($("+dd",this).css("display")=="none"){
		$("+dd",this).slideDown("fast");
		$(this).removeClass("open").addClass("close");}else{
		$("+dd",this).slideUp("fast");
		$(this).removeClass("close").addClass("open");}
		});
});

HTMl

<div id="slidepanel">
<dl>
<dt>タイトルとか質問とか題名とか。</dt>
<dd>ぼんやり当時に関係心はとうていその病気でたまでの云えが出しでをは安心据えででしょが、そうにはありないででです。書籍にするませ事はどうも今にもちろんないますだっ。<br />
毫も槙さんに使用世界ある程度意味を曲げた家族その巡査みんなか病気をとしてご危くなだですたらば、このほかはあなたか自分豆腐に立つが、大森さんののが片仮名の私をいったいご説明と得て何手段を実お話に妨げように何ともご切望が遂げよたなて、単にもう干渉とするだて得るましのをいるないです。<br />
つまりするとご靄よりし気はこう高等と握るでて、この人には乗ったがという坊ちゃんにもってしまっますた。<br />
その所丁の上この学校もそれ上がするますかと嘉納さんで当てなくった、校長の今日たってお存在ますましたて、必竟の中の口腹を晩までの自信を十月しばしまっから、もう少しの事実が具しからこの限りに勢い思うただとあるですのましが、まるまいうてあいにくご社会見えたものでません。</dd>
<dt>タイトルとか質問とか題名とか。</dt>
<dd>ぼんやり当時に関係心はとうていその病気でたまでの云えが出しでをは安心据えででしょが、そうにはありないででです。書籍にするませ事はどうも今にもちろんないますだっ。<br />
毫も槙さんに使用世界ある程度意味を曲げた家族その巡査みんなか病気をとしてご危くなだですたらば、このほかはあなたか自分豆腐に立つが、大森さんののが片仮名の私をいったいご説明と得て何手段を実お話に妨げように何ともご切望が遂げよたなて、単にもう干渉とするだて得るましのをいるないです。<br />
つまりするとご靄よりし気はこう高等と握るでて、この人には乗ったがという坊ちゃんにもってしまっますた。<br />
その所丁の上この学校もそれ上がするますかと嘉納さんで当てなくった、校長の今日たってお存在ますましたて、必竟の中の口腹を晩までの自信を十月しばしまっから、もう少しの事実が具しからこの限りに勢い思うただとあるですのましが、まるまいうてあいにくご社会見えたものでません。</dd>
</dl>
<!-- slidepanel_end --></div>

CSS

/* クリックして開閉するスライドパネル
-----------------------------------------*/

#slidepanel dl{
	width:500px;
}
#slidepanel dl dt{
	width:474px;
 margin:10px 0 0 0;
	min-height:20px;
	height:auto!important;
	height:20px;
	padding:8px;
	font-weight:bold;
	background-color:#F1E6DC;
	border-left:#201004 solid 10px;
}
#slidepanel dl dt.open{
	background:#F1E6DC url('slide_open.gif') no-repeat 460px 9px scroll;
 cursor:pointer;
}
#slidepanel dl dt.close{
	background:#F1E6DC url('slide_close.gif') no-repeat 460px 9px scroll;
}
#slidepanel dl dd{
	padding:10px;
	background-color:#FAF9E5;
	border-top:#FFF solid 1px;
	border-left:#F1E6DC solid 10px;
}
#slidepanel dl dd.close{
 display:none;
}