[mootools]Fx.Slideを複数並べる

Fx.Slideを1ページ内にいくつも並べるサンプル。
※このサンプルは前バージョン（1.1.2）で書いたものなので1.2では動かないかも

<h2><a class="toggle" href="#">toggle</a></h2>
<div class="test">
sample
</div>
<h2><a class="toggle" href="#">toggle</a></h2>
<div class="test">
sample
</div>
<h2><a class="toggle" href="#">toggle</a></h2>
<div class="test">
sample
</div>
<h2><a class="toggle" href="#">toggle</a ></h2>
<div class="test">
sample
</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();
	});
});
});

var btns = $$('.toggle');
ボタンになる要素取得。

var divs = $$('.test');
スライドする要素取得。

btns.each(function(el,index){
foreach($btns as $index =>$el)　という意味

var mySlide = new Fx.Slide(divs[index], {mode: 'horizontal'});
divsの要素それぞれにFx.Slide作成。

btns[index].addEvent('click', function(e){
クリックイベント作成。

配列で取得した順にeachで処理するので、btns[2]をクリックしたらdivs[3]をスライドさせるということは出来ない。