Akkordeon Style änder/anpassen
Liebe Community
Ich möchte gerne das Akkordeon so anpasen das jedes zweite im geschlossenden Zustand ein grauer balken als hintergrund hat so das man es besser unterscheiden kann.
Leider habe ich keine Ahnung vom abäbändern, in diesem Bereich, habe aber herausgefunden das es wohl über diesen Text sein muss. Kann mir das jemand gerade so anpassen?
http://www.barbara-club.ch/index.php/zeedel-100.html
Danke vielmals
Gruss Lukas
PHP-Code:
<script>
(function($) {
window.addEvent('domready', function() {
new Fx.Accordion($$('div.toggler'), $$('div.accordion'), {
opacity: false,
display: -1, // -1, alle Akkordions sind am Anfang eingeklappt
alwaysHide: true,
onActive: function(tog, el) {
el.setProperty('aria-hidden', 'false');
tog.addClass('active');
tog.getNext('div').fade('in');
tog.setProperty('aria-expanded', 'true');
return false;
},
onBackground: function(tog, el) {
el.setProperty('aria-hidden', 'true');
tog.removeClass('active');
tog.getNext('div').fade('out');
tog.setProperty('aria-expanded', 'false');
return false;
}
});
$$('div.toggler').each(function(el) {
el.setProperty('role', 'tab');
el.setProperty('tabindex', 0);
el.addEvents({
'keypress': function(event) {
if (event.code == 13) {
this.fireEvent('click');
}
},
'focus': function() {
this.addClass('hover');
},
'blur': function() {
this.removeClass('hover');
},
'mouseenter': function() {
this.addClass('hover');
},
'mouseleave': function() {
this.removeClass('hover');
}
});
});
$$('div.ce_accordion').each(function(el) {
el.setProperty('role', 'tablist');
});
$$('div.accordion').each(function(el) {
el.setProperty('role', 'tabpanel');
});
});
})(document.id);
</script>
