Contao: jQuery-Accordions via Link öffnen

  • Snippets

Es ist möglich, so auf ein Accordion-Element verlinken, dass die Zielseite beim Aufruf bis zur Position des Accordions scrollt und das Accordion geöffnet wird. Dazu muss zunächst das Accordion-Template angepasst werden.
Legen Sie - falls nicht schon vorhanden - unter "Templates" eine neue "j_accordion.html5" an. Öffnen Sie das Template und fügen sie diesen Code ein:

 

$('div.toggler').each(function() {
   if (document.location.hash === '#' + $(this).parent().attr('id') && !$(this).hasClass('active')) {
   $(this).click();
       }
});

 

Danach sollte der Code so aussehen:

 

<script src="<?= $this->asset('js/jquery-ui.min.js', 'contao-components/jquery-ui') ?>"></script>
<script>
  jQuery(function($) {
    $(document).accordion({
      // Put custom options here
      heightStyle: 'content',
      header: '.toggler',
      collapsible: true,
      active: true,
      create: function(event, ui) {
        ui.header.addClass('active');
        $('.toggler').attr('tabindex', 0);
      },
      activate: function(event, ui) {
        ui.newHeader.addClass('active');
        ui.oldHeader.removeClass('active');
        $('.toggler').attr('tabindex', 0);
      }
    });
     /* Anpassung für Verlinkung */
      $('div.toggler').each(function() {
          if (document.location.hash === '#' + $(this).parent().attr('id') && !$(this).hasClass('active')) {
              $(this).click();
          }
      });
      /* Anpassung Ende */
  });
</script>

 

Speichern Sie die Änderung. Geben Sie nun jedem anzusteuernden Accordion-Element eine eindeutige ID wie z.B. "acc1", "acc2", "acc3" usw..

Erstellen Sie danach Ihre Links zu den anzusteuernden Accordions, wobei jeweils deren ID an die Links angehängt werden muss. Ein Link sieht dann z.B. so aus "zielseite.html#acc1". Beim Aufruf dieses Links wird nun die Seite "zielseite.html" geöffnet, bis zur Position des Accordions mit der ID "acc1" gescrollt und das Accordion geöffnet.

 

 

Bildnachweis:

Photo by Gaelle Marcel on Unsplash

 

Hinweis: Wie immer gilt, dass für das Funktionieren dieser Snippets keinerlei Haftung oder Gewährleistung übernommen wird.

Zurück