【ｊQuery】スマフォサイトのアコーディオン

質問

スマートフォンサイトで使用するアコーディオンについて
下記サイトのものを参考に制作しています。
http://07design.net/blog/?p=477

こちらのスクリプトでは、一つのコンテンツをクリックして、
もう一度クリックしない限り開いたままの状態になりますが、
一つのコンテンツが開かれている場合、
その他のコンテンツを閉じるように動作させることは可能でしょうか？

イメージ的にはこちらのサイトにあるようなものです。
http://www.geekzshu.com/jquery/975

どなたか解決策がお解かりの方がおられましたら
宜しくお願いいたします。

■html

<section class="list">
<div class="acordion">
<h3 class="trigger">タップで開閉<span class="open-close">open</span></h3>
<div class="acordion_tree">
<p>ここに内容</p>
</div>

<h3 class="trigger">タップで開閉<span class="open-close">open</span></h3>
<div class="acordion_tree">
<p>ここに内容</p>
</div>

<h3 class="trigger">タップで開閉<span class="open-close">open</span></h3>
<div class="acordion_tree">
<p>ここに内容</p>
</div>
</div>
</section>

<script type="text/javascript">
$(function(){
$("#accordion").accordion({
header: "h3",
collapsible:true,
animated: 'bounceslide' ,

autoHeight:false,
active:10
});
});
</script>

■javascript

$(document).ready(function(){
//acordion_treeを一旦非表示に
$(".acordion_tree").css("display","none");
//triggerをクリックすると以下を実行
$(".trigger").click(function(){
//もしもクリックしたtriggerの直後の.acordion_treeが非表示なら
if($("+.acordion_tree",this).css("display")=="none"){
//classにactiveを追加
$(this).addClass("active");
//直後のacordion_treeをスライドダウン
$("+.acordion_tree",this).slideDown("normal");
}else{
//classからactiveを削除
$(this).removeClass("active");
//クリックしたtriggerの直後の.acordion_treeが表示されていればスライドアップ
$("+.acordion_tree",this).slideUp("normal");
}
});
});

回答No.1

kamepanman · ベストアンサー

javascriptの

//classにactiveを追加

の上に下記を追加してみてください。

//一旦全てのacordion_treeをスライドアップ
$(".acordion_tree",this).slideUp("normal");

お礼

思っていた動作をすることができました！！
本当にありがとうございます！！