Ich habe genau das gleiche Anliegen entsprechend dem Thema.
Leider kann ich die Lösung aus den bisherigen Beiträgen nicht heraus lesen.
Im Backend habe ich unter Templates neue Templates erstellt und aus der Vorschlagsliste die unten beschriebenen Templates ausgewählt
Bildschirmfoto 2018-04-02 um 21.18.42.pngBildschirmfoto 2018-04-02 um 21.18.42.png
Ich habe bereits, wie es im Handbuch steht, das Template moo_accordion.html5 um die Zeile display: -1, // -1, alle Akkordions sind am Anfang eingeklappt erweitert. Dennoch ist immer das erste Element im Akkordeon geöffnet.
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 || 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.accordion').each(function(el) {
el.setProperty('role', 'tabpanel');
});
});
})();
</script>
Der code für das Template j_accordion.html5 sieht so aus:
Code:
<script src="<?= TL_ASSETS_URL ?>assets/jquery/ui/<?= $GLOBALS['TL_ASSETS']['JQUERY_UI'] ?>/jquery-ui.min.js"></script>
<script>
(function($) {
$(document).ready(function() {
$(document).accordion({
// Put custom options here
heightStyle: 'content',
header: 'div.toggler',
collapsible: true,
create: function(event, ui) {
ui.header.addClass('active');
$('div.toggler').attr('tabindex', 0);
},
activate: function(event, ui) {
ui.newHeader.addClass('active');
ui.oldHeader.removeClass('active');
$('div.toggler').attr('tabindex', 0);
}
});
});
})(jQuery);
</script>
Zitieren
3.4.3 Installation.
Zitat von tab
.
Lesezeichen