jQueryの開閉式コンテンツ(完全版)


以前ご紹介した開閉式パネル

jQueryでFAQなどの開閉式パネルを実装したい - とあるWebデザイナーの逆引き辞典Plus

これをずっと使い続けてきたのですが、場合によって開閉が連動してしまうなど、

挙動がおかしくなることがありました。

これを解消したのが下記の記述です


<dl>
<dt class="show-hide">○○について</dt>
<dd>○○とは、・・・・</dd>
<dt class="show-hide">××について</dt>
<dd>××とは、・・・・</dd>
</dl>

$('dt.show-hide').each(function(i){
$('dt.show-hide').eq(i).click(function(){
if($('+dd','dt.show-hide').eq(i).css('display') =='none')
$('+dd','dt.show-hide').eq(i).slideDown('slow');
else
$('+dd','dt.show-hide').eq(i).slideUp('slow');
});
});