Mootools accordion with a Next button inside each pane

Question

I'd like to add a Next button to all (well... all except the last) panes of an accordion navigation device. As you'd expect, when you click the Next button, the current pane collapses and the next one opens.

It's on a Joomla site, and so we're using MooTools. I'm having trouble getting the action of the click event to work. Any thoughts?

window.addEvent('domready', function() {
var accordion = new Fx.Accordion($$('#accordion h2'),$$('#accordion .content'), {
    onActive: function(toggler,element) { toggler.addClass('active');element.addClass('active'); },
    onBackground: function(toggler,element) { toggler.removeClass('active');element.removeClass('active'); }
});

$$('.button.next').addEvent('click', function(event){
      event.stop();
      accordion.display.getNext(); //HELP HERE PLEASE
    });
});

Many thanks!! Dan

Answer 1

Inspect your accordion instance in console.log(accordion) ;) Try accessing previous property of accordion instance. It doesn't documented and may change with future versions of MooTools More, but it is the easiest way to do what you want:

$$('.button.next').addEvent('click', function(event){
    event.stop();
    accordion.display(accordion.previous + 1);
});

Working fiddle here: http://jsfiddle.net/9859J/