Reference an accordion instance in Mootools

Question

I'm using a CMS (Joomla 3) to show an accordion. Beyond the default functionality, I wish to put a button on each pane of the accordion to step to the next pane. Normally this would be done at the point at which the accordion is initialised but Joomla just does

window.addEvent('domready', function() {
new Fx.Accordion($$('div#cf_container_0.pane-sliders > .panel > h3.pane-toggler'), etc...});

So there is no reference to add the button events as seen in Mootools accordion with a Next button inside each pane

Is there any way I can programatically find the accordion and add the click event to each button? I don't want to change the core Joomla functionality in case it gets overwritten in future updates so this needs to be standalone from when the accordion is created.

Many thanks

Answer 1

it is possible, yes. will be a little hacky. most modern mootools classes save a reference to the element they are applied on into element storage. accordions do not. you can fix that by overloading the default initialize (constructor method) like so:

(function(){
// before the other code runs, after mootools-more is loaded.
var old = Fx.Accordion.prototype.initialize;
Fx.Accordion.prototype.initialize = function(){
    old.apply(this, arguments);
    var self = this;
    this.elements.each(function(element){
        element.store('accordion', self);
    });
};
}());

// now your domready code can make the accordions after the changes.   

// now to get to the instance:
var a = document.getElement('div#cf_container_0.pane-sliders > .panel > h3.pane-toggler').retrieve('accordion');
a.display.getNext(); // etc - whatever you can call from instance

not tested it but you get the idea - should work fine.