gooodmark

よく使うアコーディオンメニュー。
dtをクリックすると、スルスルとddが表示される。

html

<dl class="accordion">
<dt>CLICK！</dt>
<dd>OPEN！</dd>
</dl>

css

dl dt {
	height: 50px;
	line-height: 50px;
	cursor: pointer;
	background: #FFF;
}

dl dt:hover { background: #f8f8f8 ; }

dl dt.open { background: #f2f2f2; }

dl dd {
	display: none;
	background: #FFF;
	padding: 20px;
	border-bottom: 1px solid #f0f0f0;
}

js

$(function(){
  $(".accordion dt").click(function(){
	$(this).next("dd").slideToggle();
	$(this).next("dd").siblings("dd").slideUp();
	$(this).toggleClass("open");    
	$(this).siblings("dt").removeClass("open");
  });
});