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");
});
});