Quelltext der Seite Accordions - Direktes anspringen und aufklappen

[[Category:Dev_Snippets]]
== 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.
<source lang=j>
<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>
</source>

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

<source lang=j>
<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>
</source>