gooodmark

goodなWebサイトを厳選ブックマーク!デザインやディレクションの参考にどうぞ。

516bookmark

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

よく使うアコーディオンメニュー。
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");
  });
});

demo