Contao Akkordeon geschlossen beim Laden darstellen

Hinweis: Dieser Beitrag stammt aus der Contao-3/4-Ära und beschreibt den damaligen Stand — mit .html5-Templates und Mootools, das es in Contao 5 nicht mehr gibt.

Seit Contao 5.3 gibt es im Backend direkt eine Checkbox, um ein Akkordeon geschlossen darzustellen. Dadurch lässt sich pro Akkordeon festlegen, ob dieses zu Beginn geschlossen dargestellt wird oder standardmäßig das erste Element geöffnet sein soll.

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.