Contao Tipps

Akkordeon Modul geschlossen

In Version 2.11 von Contao haben sich die Templates von Mootools geändert. Um nun einen beliebten Effekt zu erreichen, das alle Akkordeons geschlossen sind, muss nun folgendes getan werden. (Für Contao 2.10 und älter siehe hier)

Über das Backend eine Kopie anlegen und editieren:

Layout Templates
Neues Template , Auswahl moo_accordion, Zielverzeichnis auswählen (ab 2.9), Template erstellen
Template umbenennen (Bleistift) nach moo_accordion_closed (die Endung macht Contao selber ran)
Template editieren, Zeile "display: false," einfügen, speichern
Unter Themes - Layout das alte Template abwählen, das neue auswählen.

Das Template sollte dann so aussehen (XHTML Variante:

Contao 2.11

<script type="text/javascript">
/* <![CDATA[ */
(function($) {
  window.addEvent('domready', function() {
    new Accordion($$('div.toggler'), $$('div.accordion'), {
      display: false,
      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');
    });
  });
})(document.id);
/* ]]> */
</script>