アコーディオンが思い通りに動きません！

こんにちは。色々試してもうまくいかないため、相談させて下さい。参考サイトの「accordion 31同時開閉タイプ」を実装しようとしているのですが、思い通りの挙動になりません。現状では、見出しをクリックすると全て開いてしまいますが、開くのはクリックしたものだけで、それ以外は閉じる仕様にしたいのです。

参考サイト
http://pops-web.com/main/html/demo-007.html

私がやってみたもの
http://otyame.chicappa.jp/test/
----------------------------------------------------------
●HTML

<div id="categoryListBlock">

<ul id="main">
<li id="testlist01" class="category">
<dl>
<dt>見出し1</dt>
<dd>
<ul id="fashionItem">
<li><a href="#">テストリスト</a></li>
<li><a href="#">テストリスト</a></li>
<li><a href="#">テストリスト</a></li>
</ul>
</dd>
</dl>
</li>
<li id="testlist02" class="category">
<dl>
<dt>見出し2</dt>
<dd>
<ul id="fashionItem">
<li><a href="#">テストリスト</a></li>
<li><a href="#">テストリスト</a></li>
<li><a href="#">テストリスト</a></li>
</ul>
</dd>
</dl>
</li>
</ul>

</div>

●Javascript

$(function(){

//オブジェクトを保存
var accordionItem=$('#main');
//一旦全部消す
accordionItem.find('dd').hide();

//active要素を指定して開く
var no=0;
accordionItem.find('dt').eq(no).addClass('active').next('dd').show();

//click-action
accordionItem.find('dt').click(function () {

//slide
$(this).next('dd').slideToggle('slow')
.siblings('dd:visible').slideUp('slow');
//activeクラス切り替え
$(this).toggleClass('active');
$(this).siblings('dt').removeClass('active');

});

//hover-toggle
accordionItem.find('dt').hover(function () {

//toggle hoveredクラス
$(this).toggleClass('hovered');

});
});

----------------------------------------------------------

おそらくHTMLの構造が違うため「.siblings」というセレクタが上手く動作していないのかなと思われますが、このような場合どうしたら良いのでしょうか。

よろしくお願い致します。

No.2 ベストアンサー 回答者： ONEONE 回答日時： 2014/08/14 21:55

結局、parents, children(find), siblingsなどを使って目的のタグを指定すれば良いのです。

以下、未検証ですがこんな感じかと。
$(this).toggleClass('active');
$(this).parents('ul').find('dt').not($(this)).removeClass('active');

この回答へのお礼

うまくいきました！何から何まですみません、ありがとうございました。
parentsの使い方が理解できました。次回から活かしていきたいと思います。

お礼日時：2014/08/14 22:20

No.1 回答者： ONEONE 回答日時： 2014/08/14 20:05

slideの部分をこんなかんじに変更します。

//slide
$(this).next('dd').slideToggle('slow')
.parents('ul').find('dd:visible').not($(this).next('dd')).slideUp('slow');

//activeクラス切り替え
は期待通りの動きをしてないけど動作には関係ないのでそのままにしておきます。

この回答への補足

ご回答ありがとうございます！！

大変お手数なのですが、、
activeクラスの切り替えについても
ご教授願えますと大変助かります。

よろしくお願い致します。

補足日時：2014/08/14 21:21