MooTools Fx.Slide for several containers on one page

Question

Trying to add a slide effect in MooTools.

Desired functionality: click on link in div.head toggles div below it.

HTML:

<div class="head"><a id="v_toggle" href="#">Number One</a></div>
<div id="main">Blah blah blah...</div>
<div class="head"><a id="v_toggle" href="#">Number Two</a></div>
<div id="main">Blah blah blah...</div>
<div class="head"><a id="v_toggle" href="#">Number Three</a></div>
<div id="main">Blah blah blah...</div>

JS:

window.addEvent('domready', function() {
    var myVerticalSlide = new Fx.Slide('main');
    $('v_toggle').addEvent('click', function(event){
        event.stop();
        myVerticalSlide.toggle();
    });
});

Issues:

• first of all, no sliding :-(
• several elements with the same id in one page (#v_toggle, #main) --> tried to make both ids classes, didn't work either (no sliding)

Fiddle: http://jsfiddle.net/S6KtS/

Answer 1

The Fx.Slide is for individual elements, not families. Besides you cannot have multiple ID's, it will break your code, it's invalid html.

Try this:

Mootools

window.addEvent('domready', function () {
    var status = [];
    var divsMain = $$('div.main');

    var toggleDivs = function(i){
        return function(){
            var nextMain = this.getParent().getNext('.main'); 
            var doIt = status[i] ? nextMain.dissolve() : nextMain.reveal();
            status[i] = !status[i];
            return false;
        }
    }
    $$('.v_toggle').each(function(el,i){
        el.addEvent('click', toggleDivs(i));
        status[i] = true;
    });
});

HTML

<div class="head"><a class="v_toggle" href="#">Number One</a>

</div>
<div class="main">This is a lot of text in this container. I want to slide it in and out. This is an experiment with MooTools. his is a lot of text in this container. I want to slide it in and out. This is an experiment with MooTools. his is a lot of text in this container. I want to slide it in and out. This is an experiment with MooTools.</div>
<div class="head"><a class="v_toggle" href="#">Number Two</a>

</div>
<div class="main">This is a lot of text in this container. I want to slide it in and out. This is an experiment with MooTools. his is a lot of text in this container. I want to slide it in and out. This is an experiment with MooTools. his is a lot of text in this container. I want to slide it in and out. This is an experiment with MooTools.</div>
<div class="head"><a class="v_toggle" href="#">Number Three</a>

</div>
<div class="main">This is a lot of text in this container. I want to slide it in and out. This is an experiment with MooTools. his is a lot of text in this container. I want to slide it in and out. This is an experiment with MooTools. his is a lot of text in this container. I want to slide it in and out. This is an experiment with MooTools.</div>

Fiddle