Hallo,
ich habe einen Onepager mit mehreren Accordions.
Die Accordions beeinflussen sich gegenseitig, d.h. wenn ich bei Accordion B einen Bereich öffne, geht bei Accordion A und C alles zu.
Es sollen aber A, B und C unabhängig voneinander agieren.
Es soll bei allen Accordions im Grundzustand der erste Bereich geöffnet sein.
Genau so:
http://jsfiddle.net/VeWVS/
Als javascript ist dort nur angegeben:
Code:
window.addEvent('domready', function(){
new Fx.Accordion($('accordion1'), '#accordion1 h2', '#accordion1 .content');
new Fx.Accordion($('accordion2'), '#accordion2 h2', '#accordion2 .content');
});
Das moo_accordion.html5 sieht so aus:
Code:
<script>
(function() {
window.addEvent('domready', function() {
new Fx.Accordion($$('div.toggler'), $$('div.accordion'), {
opacity: false,
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');
});
});
})();
</script>
Wie bekomme ich wohl obigen Javascript vom jsfiddle in das moo_accordion.html5 integriert?
Ich kenne mich leider nicht aus mit javascript.
Ich habe schon alles mögliche probiert, komme aber einfach nicht weiter, und es ist auch ein bisschen dringend.
Lesezeichen