【jQuery】スマフォサイトのアコーディオン
スマートフォンサイトで使用するアコーディオンについて
下記サイトのものを参考に制作しています。
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");
}
});
});
お礼
早速のご回答ありがとうございました。 試しにsvgも扱えるライブラリ「jquery.svg.js」を読み込んでみましたが状況は変わりませんでした。 また $("g text tspan:contains('abc'); とすると正常にtspan要素を取得できました。 なぜクラス指定すると取得できないのでしょうか? よろしくお願いいたします。