アコーディオンのタブ開きリンクについて

質問

以下の通りアコーディオンを設定しました。
http://street.s51.xrea.com/test/index-.html

デフォルトでは全て展開・全て閉じるのリンクがあるのですが、
１つのタブを開いた後に「次のタブを開く」のリンクを作りたいと考えています。
この場合のソースはどのようになるでしょうか？

よろしくおねがいいたします

---
<script type="text/javascript">
var parentAccordion=new TINY.accordion.slider("parentAccordion");
parentAccordion.init("acc","h3",0,0);

var nestedAccordion=new TINY.accordion.slider("nestedAccordion");
nestedAccordion.init("nested","h3",1,-1,"acc-selected");
----

---
var TINY={};

function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}

TINY.accordion=function(){
function slider(n){this.n=n; this.a=[]}
slider.prototype.init=function(t,e,m,o,k){
var a=T$(t), i=s=0, n=a.childNodes, l=n.length; this.s=k||0; this.m=m||0;
for(i;i<l;i++){
var v=n[i];
if(v.nodeType!=3){
this.a[s]={}; this.a[s].h=h=T$$(e,v)[0]; this.a[s].c=c=T$$('div',v)[0]; h.onclick=new Function(this.n+'.pr(0,'+s+')');
if(o==s){h.className=this.s; c.style.height='auto'; c.d=1}else{c.style.height=0; c.d=-1} s++
}
}
this.l=s
};
slider.prototype.pr=function(f,d){
for(var i=0;i<this.l;i++){
var h=this.a[i].h, c=this.a[i].c, k=c.style.height; k=k=='auto'?1:parseInt(k); clearInterval(c.t);
if((k!=1&&c.d==-1)&&(f==1||i==d)){
c.style.height=''; c.m=c.offsetHeight; c.style.height=k+'px'; c.d=1; h.className=this.s; su(c,1)
}else if(k>0&&(f==-1||this.m||i==d)){
c.d=-1; h.className=''; su(c,-1)
}
}
};
function su(c){c.t=setInterval(function(){sl(c)},20)};
function sl(c){
var h=c.offsetHeight, d=c.d==1?c.m-h:h; c.style.height=h+(Math.ceil(d/5)*c.d)+'px';
c.style.opacity=h/c.m; c.style.filter='alpha(opacity='+h*100/c.m+')';
if((c.d==1&&h>=c.m)||(c.d!=1&&h==1)){if(c.d==1){c.style.height='auto'} clearInterval(c.t)}
};
return{slider:slider}
}();

回答No.1

fujillin · ベストアンサー

Ｖ2もあるみたいなので、どちらかなのわからないけれど、こちらでしょうか？
http://www.scriptiny.com/2009/03/accordion/

ご提示の設置サンプルはスクリプトエラーが出ます。（無視するブラウザもありますが…）
原因は、スクリプトはネストしたアコーディオンになっているのに、HTMLにはネストがないから…
まずは、このあたりの設定から直したほうがよろしいかと。

さて、簡単な方法としては、上記サイトの少し下で説明されている、開閉のメソッドを利用することだと思われます。
　<span onclick="hoge.pr(0, 2)">[次へ開く]</span>
みたいな方法が一番簡単かと思います。（hogeは対象のアコーディオン・オブジェクト。第二引数が表示パネルのindex）
ただし、このメソッドだと開閉がトグルになっているので、要素が開いた状態で実行すると逆に閉じてしまいますが…

開閉の状態を判断するのなら、
　hoge.a[index].c.d == -1 が非表示状態ですから、その条件分岐で上記メソッドを実行するようにすればよろしいかと。（値が1だと表示状態）

また、HTML内に個々にonclickを書かないで、
　<span class="fuga">[次へ開く]</span>
みたいにしておいて、fugaクラスのものをクリックしたら次を開くみたいなものを追加することも可能かと思われます。
クリックしたら、自分を閉じて次を開くみたいなことも不可能ではありませんが、試してみたところ、現状のままで行なおうとすると少々やりにくいようです。

お礼

どうもありがとうございました。

補足

わかり安回答ありがとうございます。

> さて、簡単な方法としては、上記サイトの少し下で説明されている、開閉のメソッドを利用することだと思われます。
> 　<span onclick="hoge.pr(0, 2)">[次へ開く]</span>
> みたいな方法が一番簡単かと思います。（hogeは対象のアコーディオン・オブジェクト。第二引数が表示パネルのindex）
> ただし、このメソッドだと開閉がトグルになっているので、要素が開いた状態で実行すると逆に閉じてしまいますが…
>
> 開閉の状態を判断するのなら、
> 　hoge.a[index].c.d == -1 が非表示状態ですから、その条件分岐で上記メソッドを実行するようにすればよろしいかと。（値が1だと表示状態）

ご教授ありがとうございます。
開いた状態で、
<span onclick="hoge.pr(0, 2)">[次へ開く]</span>のまま追加したら、マウスで閉じてしまいました・・・

具体的にどこをどうすればよいでしょうか？

---
hoge.a[index].c.d == -1 が非表示状態ですから、その条件分岐で上記メソッドを実行するようにすればよろしいかと。（値が1だと表示状態）
---

が分かりませんでした。

http://www.scriptiny.com/2009/03/accordion/で間違いないです。

よろしくおねがいします