Accordions - Direktes anspringen und aufklappen

Aus Contao Community Documentation

Lösung für j_accordion (jQuery)

mit Standardoptionen (erstes Accordion geföffnet)

Um Accordions direkt zu verlinken reicht es eigentlich die ID des Headers mit anzugeben:

z.B. seite.html#ui-accordion-1-header-1

ui-accordion-1-header-1 ist dabei die des anzuspringenden Headers

Wenn es nicht das erste Accordion ist, so ist dieses jetzt noch geschlossen. Wenn man nun noch eine Kopie des Templates j_accordion anlegt und folgenden Code nutzt, wird das Accordion auch aufgeklappt.

<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo 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
      });
      var activate = function(tog) {
        var tgs = $('div.toggler');
        tgs.removeClass('active');
        tog.addClass('active');
        tgs.next('div.accordion').attr('aria-hidden', 'true');
        tog.next('div.accordion').attr('aria-hidden', 'false');
      };
      $('div.toggler').focus(function(e) {
        $('div.toggler').attr('tabindex', 0);
        $(this).attr('tabindex', -1);
      }).blur(function() {
        $(this).attr('tabindex', 0);
      }).click(function() {
        activate($(this));
      }).keypress(function(event) {
        if (event.keyCode == 13) activate($(this));
      });
 
      // direkt anspringen über Anker(ID)
      $('div.toggler').each(function(el, index){
        if (window.location.href.split('#')[1] == $(index).attr('id') && el > 0)
        {
           index.click(); 
        }
      });      
    });
  })(jQuery);
</script>

mit der Option "active: false" (alle Accordions geschlossen)

Wurde die Option "active: false" hinzugefügt, damit alle Bereiche beim Laden der Seite geschlossen sind, sorgt die folgende Version dafür, dass das Accordion mit angesprochenen ID geöffnet wird:

<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo 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
      });
      var activate = function(tog) {
        var tgs = $('div.toggler');
        tgs.removeClass('active');
        tog.addClass('active');
        tgs.next('div.accordion').attr('aria-hidden', 'true');
        tog.next('div.accordion').attr('aria-hidden', 'false');
	scrollToTop(tog);
      };
      $('div.toggler').focus(function(e) {
        $('div.toggler').attr('tabindex', 0);
        $(this).attr('tabindex', -1);
      }).blur(function() {
        $(this).attr('tabindex', 0);
      }).click(function() {
        activate($(this));
      }).keypress(function(event) {
        if (event.keyCode == 13) activate($(this));
      });
	var scrollToTop = function(tog) {
        $('html, body').animate({scrollTop: $(tog).offset().top}, 200);
      };
 
      // direkt anspringen über Anker(ID)
      $('div.toggler').each(function(el, index){
        if (window.location.href.split('#')[1] == $(index).attr('id') )
        { index.click(); }
      });      
    });
  })(jQuery);
</script>
Ansichten
Meine Werkzeuge

Contao Community Documentation

Andreas, leg dich da hinten hin und schlaf, dann kommen wir vorwaerts.

Tristan Lins
Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge