Akkordeon mit Elementyp "Umschlag Anfang - Ende" springt bei Klick nicht auf Anfang
Liebe Contao Gemeinde!
Wohl wissend, dass diese Frage oder Problem wahrscheinlich schon so alt ist wie Contao selbst, habe ich mir heute fast die Augen wund gelesen (Forum und Contao Google Suche) und habe die Lösung, falls es den überhaupt eine gibt, einfach nicht gefunden.
Ich möchte mich kurz fassen: Ich habe nach mehrjähriger Pause nun wieder ein kleines Projekt mit mit Contao 3.5.12 erstellt. Die Seite ist bereits online unter: http://www.icon-bau.at erreichbar, was das ganze vielleicht etwas leichter macht.
Unter Projekte gibt es derzeit 4 Kategorien eine davon ist: http://www.icon-bau.at/erd-und-strassenbau.html
Ich habe für mich und den Kunden die Auflistung der BVH mit Akkordeons bewerkstelligt, was auch tadellos gelungen ist. Es gibt leider nur einen Wehrmutstropfen, dass beim Aufklappen des nächsten Akkordeons dieses nicht an den Anfang springt, sondern wie ersichtlich, am untere Ende bleibt und man nach oben scrollen muss.
Das Template moo_accordion.html5 ist ordnungsgemäß ins Seitenlayout eingebunden:
Code:
<script>
(function() {
window.addEvent('domready', function() {
new Fx.Accordion($$('div.toggler'), $$('div.accordion'), {
opacity: false,
display: 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 || event.code == 32) {
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>
und hat das Öffnen des ersten Akkordeon durch einfügen der Zeile: display: false, auch unterdrückt.
Wie könnte man nun das Problem lösen, damit beim Öffnen des nächsten Akkordeons dieses sich am Anfang positioniert?
Vielen Dank für eine möglichen Lösungsweg!
Grüße ewaldo
