Adding An Active Class To A Mootools Accordion Element

Question

With the rise of CSS3, I'd like to control the animation used by the mootools accordion class via css transitions, and I figure the best way to do that is to assign an active class to both the toggler and element parts of the accordion.

I've been able to do that for the toggler element, but after many attempts, I can't figure out how to give the element an active class.

The mootools code I've got so far is:

var myAccordion = new Fx.Accordion($$('.toggler'), $$('.services-element'), {
display: 1,
fps: 24,
duration: 400,
onActive: function(toggler) { toggler.addClass('active-accordion'); },
onBackground: function(toggler) { toggler.removeClass('active-accordion'); },
show: 0,
height: false,
width: false,
opacity: 0.3,
fixedHeight: 320,
fixedWidth: null,
alwaysHide: true,
initialDisplayFx: false
});

If anyone can help with this, I'd be most appreciative.

Answer 1

Thanks to the info provided by Johan, I've amended the onActive and onBackground rules as follows:

onActive: function(toggler, element) { toggler.addClass('active-accordion'), element.addClass('active-accordion') ; },
onBackground: function(toggler, element) { toggler.removeClass('active-accordion'), element.removeClass('active-accordion'); },

This gives me what I need.