Accordions - Direktes anspringen und aufklappen

2013-07-22T10:33:30Z

Katgirl: Die Seite wurde neu angelegt: „ == 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…“

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

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

Contao Community Documentation - Benutzerbeiträge [de]

Accordions - Direktes anspringen und aufklappen