Just use your css to style it? Here is a quick example (I did not test
this)
HTML
<h3><span class="red">Toggler One</span></h3>
<div class="element"></div>
<h3><span class="blue">Toggler Two</span></h3>
<div class="element"></div>
<h3><span class="green">Toggler Three</span></h3>
<div class="element"></div>
CSS
h3 span{ display:block; }
h3.active span.red{ background-color:#ff0000; }
h3.active span.blue{ background-color:#0000ff; }
h3.active span.green{ background-color:#00ff00; }
JS
new Accordion($$('.element'), $$('.toggler'),{
onActive: function(toggler, element){
toggler.addClass('active');
}
onBackground: function(toggler, element){
// cant remember but you might have to remove active from all
togglers here
toggler.removeClass('active');
}
});
On Oct 14, 12:18 pm, genxco <[EMAIL PROTECTED]> wrote:
> Sorry trying to learn mootools and need a little bit of help, how do I
> set different background color for each active button accordion?...is
> this possible?
>
> All the h3.toggler are all set with the same setStyles is it possible
> to assign different style to each h3.toggler when active?
>
> I think I need to assign an ID to a h3.toggler, right? or am I
> completely off?
> ex: <h3 class="toggler" id="1st_button">1st_button</h3>
>
> Sorry kind of new, if someone could help me out a little would be much
> appreciative.
>
> window.addEvent('domready', function() {
>
> //create our Accordion instance
> var myAccordion = new Accordion($('accordion'), 'h3.toggler',
> 'div.element', {
> opacity: false,
> onActive: function(toggler, element){
> toggler.setStyles({'color': '#ffffff',
> 'background-color':
> '#025396'
> });
> },
> onBackground: function(toggler, element){
> toggler.setStyles({'color': '#e6e3e3',
> 'background-color':
> '#0483ec'
> });
> }
> });
>
> $$('.toggler').addEvent('mouseenter', function()
> {this.fireEvent('click'); });
>
> });
>
> thanks in advance
