Tipps und Tricks Filter

Akkordeon Modul Element direkt öffnen lassen per Link

Mit Anpassung des Akkordeon Templates ist es möglich, per Link zu steuern, welches Element geöffnet sein soll. Dazu muss nun folgendes getan werden.

Über das Backend eine Kopie anlegen und editieren:

  • Layout Templates
  • Neues Template , Auswahl moo_accordion, Zielverzeichnis auswählen, Template erstellen
  • Template umbenennen (Bleistift) nach moo_accordion_directly (die Endung macht Contao selber ran)
  • Template editieren, den PHP Anteil zu Beginn und die Zeile "display: <?php echo $aid; ?>," einfügen, speichern
  • Unter Themes - Layout das alte Template abwählen, das neue auswählen.

Das Template sollte dann so aussehen (HTML5 Variante ab Contao 3.0):

<?php
//$aid = '-1'; // default all closed
$aid = '0'; // default first open
if ( is_numeric($this->Input->get('aid')) ) 
{
  $aid=(int)$this->Input->get('aid');
}
?>
<script>
(function($) {
  window.addEvent('domready', function() {
    new Accordion($$('div.toggler'), $$('div.accordion'), {
      display: <?php echo $aid; ?>,
      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>

Ohne weitere Änderungen passiert erst mal nichts anders als sonst. Gibt man aber nun bei einem Link auf die Seite in der ein Akkordeon eingebaut ist noch einen Parameter mit Namen "aid" an und der Zahl des Elementes welches geöffnet werden soll, wird dieses geöffnet. Achtung: Die Zählung beginnt bei 0! Für das dritte Element wäre also die 2 anzugeben. Link-Beispiel für die Seite "beispiel.html":

<a href="beispiel.html?aid=2" title="Beispielseite">Beispielseite mit Akkordeon Link</a>