Contao Akkordeon geschlossen beim Laden darstellen
Um das Akkordeon in Contao zu Beginn geschlossen darzustellen, ist nur eine kleine Anpassung im Template notwendig. Die Ergänzung unterscheidet sich, je nachdem, ob du jQuery oder Mootools verwendest.
jQuery Akkordeon(j_accordion.html5):
Bei der Übergabe der Parameter fügst du folgende Zeile hinzu (ca. Zeile 11):
active: false,
Dein Code sollte danach in etwa so aussehen:
<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,
active: false,
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>
Mootools Akkordeon(moo_accordion.html5):
Bei der Übergabe der Parameter fügst du folgende Zeile hinzu (ca. Zeile 8):
display: -1,
Dein Code sollte danach in etwa so aussehen:
<script>
(function() {
window.addEvent('domready', function() {
new Fx.Accordion($$('div.toggler'), $$('div.accordion'), {
opacity: false,
alwaysHide: true,
display: -1,
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>
Hinweis zu Mootools:
Mootools gilt mittlerweile als veraltet. Du solltest lieber mit jQuery arbeiten und deine Installationen ggf. anpassen.