スライド開閉のｊｓを複数にしたい

質問

http://sandbox.leigeber.com/accordion/index.html
元ページはこれなんですが１番上aboutの開閉１列だけでいいんです。

これをhttp://sussiweb.com/hp/html/img/13.htmの
タグ切り替えのようにボタンを押したら画像の変わりに文章が切り替わるようにしたいのです。
スペースの都合上ボタンを押したら文章が開閉しなおかつ押すボタンによって文章が変わって欲しいのです。開閉窓は１個にしたい（初期状態は閉じた状態希望）
このようなことは可能でしょうか？
よろしくお願いします。

http://sandbox.leigeber.com/accordion/index.html
の起動jacascriptは以下のものです。
var accordion=function(){
var tm=sp=10;
function slider(n){this.nm=n; this.arr=[]}
slider.prototype.init=function(t,c,k){
var a,h,s,l,i; a=document.getElementById(t); this.sl=k?k:'';
h=a.getElementsByTagName('dt'); s=a.getElementsByTagName('dd'); this.l=h.length;
for(i=0;i<this.l;i++){var d=h[i]; this.arr[i]=d; d.onclick=new Function(this.nm+'.pro(this)'); if(c==i){d.className=this.sl}}
l=s.length;
for(i=0;i<l;i++){var d=s[i]; d.mh=d.offsetHeight; if(c!=i){d.style.height=0; d.style.display='none'}}
}
slider.prototype.pro=function(d){
for(var i=0;i<this.l;i++){
var h=this.arr[i], s=h.nextSibling; s=s.nodeType!=1?s.nextSibling:s; clearInterval(s.tm);
if(h==d&&s.style.display=='none'){s.style.display=''; su(s,1); h.className=this.sl}
else if(s.style.display==''){su(s,-1); h.className=''}
}
}
function su(c,f){c.tm=setInterval(function(){sl(c,f)},tm)}
function sl(c,f){
var h=c.offsetHeight, m=c.mh, d=f==1?m-h:h; c.style.height=h+(Math.ceil(d/sp)*f)+'px';
c.style.opacity=h/m; c.style.filter='alpha(opacity='+h*100/m+')';
if(f==1&&h>=m){clearInterval(c.tm)}else if(f!=1&&h==1){c.style.display='none'; clearInterval(c.tm)}
}
return{slider:slider}
}();
これを切り替え開閉ように改造できたらと思ってます。
よろしくお願いします

回答No.3

fujillin

No1、No2です。
＞ <dt id="a">リンクボタン1</dt> <dt id="b">リンクボタン2</dt>
＞ <dd>スライド開閉するjsでここに文章を表示</dd>
って、どういうイメージなのでしょうか？
定義リストを使うなら、
　<dl>
　　<dt>タイトル1</dt>
　　　<dd>スライドの文章内容1</dd>
　　<dt>タイトル2</dt>
　　　<dd>スライドの文章内容2</dd>
　</dl>
みたいでないとおかしくありませんか？

このときにタイトルバーが表示されていて良いなら、No1にも書いたように、ライブラリの機能そのままですし、dt単位で消して（非表示）しまうのなら、それを表示させるための手段が必要になります。

なお、ライブラリの修正は、内容をちゃんと理解できるようになってから、行われた方が良いと思いますが…

↑に書いたように、表示/非表示を行いたいのであれば、アコーディオンの対象そのものが非表示状態になっているでしょうから、表示させるためには別のトリガーが必要ですし、それはアコーディオンの機能とは別に働くスクリプトで十分対応可能だと思われます。
（=むやみにライブラリをいじくる必要はないと言う意味です）

お礼

タブの切り替えのを改造しまして、日数は掛かってしまいましたが自力で解決いたしました。

回答No.2

fujillin

No1です。

もっと、良さそうな方法がありました！

必要な数だけ（ボタンの数分？）個別にスライダーを設定しておいて、それらの要素を、切り替えで1つだけ表示するようにしてあげれば、Ajaxもいらないし、（多分）イメージされているものにピッタリだと思われます。

表示/非表示の切り替えは、javascriptのサンプルサイトへ行けばいくらでもあると思いますので、探せばすぐにサンプルが見つかることでしょう。

ところで、質問のタイトルが 「スライド開閉のｊｓを複数にしたい」 だけど、質問文には数に関しては 「開閉窓は１個にしたい」 くらいしか書いてないし、タイトルの意味はいったいどういう意味だったんだろうか？

補足

説明不足だったようですm(--)mすみません
<dt id="a">リンクボタン1</dt> <dt id="b">リンクボタン2</dt>
<dd>スライド開閉するjsでここに文章を表示</dd>

のような感じにしたいのです。<dd></dd>の内容文章はできればid="a",id="b"で呼び出し切り替えしたいのです。

javascript自体がよくわかってないのでどこを変えていいやらさっぱりわからないのです。(－－;)

たぶんfujillinさんの回答で言われているような表示/非表示の切り替えだけです。

それも、いまあるjavascriptコードに条件分岐を付けるだけで完成やと直感では思ってるんですが、それもたぶんこのあたり・・・↓

var a,h,s,l,i; a=document.getElementById(t); this.sl=k?k:'';
h=a.getElementsByTagName('dt'); s=a.getElementsByTagName('dd'); this.l=h.length;
for(i=0;i<this.l;i++){var d=h[i]; this.arr[i]=d; d.onclick=new Function(this.nm+'.pro(this)'); if(c==i){d.className=this.sl}}

付け加える場所＆書き方が分からないんです。(－－;)
お助けください

回答No.1

fujillin

ご提示のコードはライブラリのコードです。

「起動用のスクリプト（？）」（実際に適用を指定しているスクリプトのことか？）は以下の部分です。
var slider1=new accordion.slider("slider1");
slider1.init("slider");
var slider2=new accordion.slider("slider2");
slider2.init("slider2",0,"open");

対象を1個にするのは、HTMLの対象となる内容を一つにすることで簡単にできます。（もちろん指定も1個ですむ）
本家の設置方法の説明を参考にしてください。
http://www.leigeber.com/
（ご提示のコードは、本家で配布しているものとは違うみたいだけど…）

ボタンを押して<div>内などのHTMLを書き換えるには、Ajaxを用いることになるかと。
つい最近、同じ質問がありましたが、比較的丁寧な回答がついていますので、それを参考にすればよろしいかと思います。
（タイミングをボタンを押した時に変える必要はある）
http://oshiete1.goo.ne.jp/qa5054730.html

対象のボタンの種類（HTMLの数）が少ない場合は、わざわざAjaxで読み込まなくても、ご提示の例をそのまま利用しておいて、表示対象の表示/非表示を切替えてあげればすみそうな気がします。
(style.displayで制御すればよい）

って考えてみたら、それがこのツールバーの機能そのものではないのかなぁ。
タイトルバーを小さくしてあげて、optionでselectedを指定してあげればまさにその機能になりそう（一つしか開かなくなるので）
と考えてきたら、タブ形式の切り替え表示のライブラリがどこかにあったような…そっちのほうがもっとイメージに近いのかも？
（質問者様のイメージをちゃんとは把握できてませんけど…）