gooodmark

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

724bookmark

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