Accordions - Direktes anspringen und aufklappen
Aus Contao Community Documentation
Lösung für j_accordion (jQuery)
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>
Ist das Accordion mit der Option "active: false" so eingestellt, dass alle Bereiche beim Laden der Seite geschlossen sind, führt die obige Lösung dazu, dass das Accordion mit der angesprochenen ID am oberen Seitenrand angezeigt wird (wie ein aufgerufener Anker) - es bleibt jedoch gechlossen.
Mit dem nachfolgenden Code wird das Accordion mit der angesprochenen ID geöffnet (allerdings wird das geöffnete Accordion damit nicht an den oberen Seitenrand gescrollt):
<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'); }; $('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') ) { index.click(); } }); }); })(jQuery); </script>
