Tipps und Tricks Filter

Akkordeon Modul geschlossen (3.x)

Um einen beliebten Effekt zu erreichen, das alle Akkordeons geschlossen sind beim Seitenaufruf, muss folgendes getan werden.

Über das Backend eine Kopie anlegen und editieren:

  • Layout Templates
  • Neues Template , Auswahl moo_accordion.html5 bzw. j_accordion.html5, Zielverzeichnis auswählen, Template erstellen
  • Template umbenennen (Bleistift) nach moo_accordion_closed / j_accordion_closed (die Endung macht Contao selber ran)
  • Template editieren,
    • Mootools: Zeile "display: -1," einfügen, speichern
    • jQuery : Zeile "active: false," einfügen, speichern
  • Unter Layout - Themes - <dein Theme => Seitenlayout> - <dein Layout> - "Skript-Einstellungen" das alte Template abwählen, das neue auswählen.

Das Template sollte dann so aussehen (Mootools Variante):

<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.accordion').each(function(el) {
        el.setProperty('role', 'tabpanel');
      });
    });
  })();
</script>

 

Hier die jQuery Variante:

 

<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>