Contao: jQuery-Accordions geöffnet lassen

  • Snippets

Per default wird ein Accordion automatisch geschlossen, wenn ein anderes Accordion auf der gleichen Seite geöffnet wird. Mit einem modifizierten jQuery-Accordion-Template lässt sich dieses Verhalten ändern.
Legen Sie - falls nicht schon vorhanden - unter "Templates" eine neue "j_accordion.html5" an. Öffnen Sie das Template und ersetzen Sie den vorhandenen Code mit dem folgenden:

 

<script src="<?= $this->asset('js/jquery-ui.min.js', 'contao-components/jquery-ui') ?>"></script>
<script>
  jQuery(function($) {
    $('.ce_accordion').each(function(i,e){
      $(this).accordion({
        heightStyle: 'content',
        header: '.toggler',
        collapsible: true,
        active: false,   
        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);
        }
      });
    });
  });
</script>

 

Speichern Sie die Änderung. Ab sofort bleiben Accordions offen, auch wenn ein anderes Accordion geöffnet wird.

 

 

Bildnachweis:

Photo by Tomas Tuma on Unsplash

 

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

Zurück