MooTools Fx.Slideを複数使用する

質問

はじめまして。
MooToolsのFx.Slideというものを利用しようと考えています。
下記デモを見てなんとか動く様にはできたのですが、

http://demos.mootools.net/Fx.Slide

この動きを同じページ内で複数使用したい為に

var mySlide = new Fx.Slide('test1');
$('toggle1').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});

var mySlide = new Fx.Slide('test2');
$('toggle2').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});

上記の様に変更したのですが、これをもっとスマートに記述する方法はありませんか？

<a id="toggle1" href="#">toggle1</a>をクリックすると<div id="test1">…</div>が動く
<a id="toggle2" href="#">toggle30</a>をクリックすると<div id="test2">…</div>が動く
・
・
<a id="toggle30" href="#">toggle30</a>をクリックすると<div id="test30">…</div>が動く
この様にidの数値を変更すれば良い様なものが理想です。
どなたか、よろしくお願い致します。

回答No.1

tenderfeel · ベストアンサー

classになりますが
<a class="toggle" href="#">toggle</a>をクリックすると<div class="test">…</div>

window.addEvent('domready', function(){
var btns = $$('.toggle');
var divs = $$('.test');

btns.each(function(el,index){
var mySlide = new Fx.Slide(divs[index], {mode: 'horizontal'});

btns[index].addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
});

これでどうでしょうか。

お礼

早速のご回答有難うございます。
思っていた様に動かせました。

まだ、勉強を始めたばかりでコードを見てもどの部分がどういう内容になっているというのが良く解らないですが、勉強して少しずつ理解できる様にしていきます。

ありがとうございました。また、よろしくお願いします。