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