Hallo Zusammen,
da ich nun auch lange an einer Lösung gefeilt habe, poste ich mal mein Ergebnis.
Schonmal vorab, meine Script-Kenntnisse sind noch nicht sehr ausgereift. Ebenso läuft das bisher nur auf einem Kundenprojekt, weshalb ich euch kein Demo-link schicken kann.
PHP-Code:
<script src="<?= TL_ASSETS_URL ?>assets/jquery/ui/<?= $GLOBALS['TL_ASSETS']['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,
create: function(event, ui) {
ui.header.addClass('active');
},
activate: function(event, ui) {
ui.newHeader.addClass('active');
ui.oldHeader.removeClass('active');
}
}).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();
}
});
$('.mod_navigation > .level_1 > .submenu > .level_2 > li > a').click(function() {
var navId = $(this).attr('href').split('#')[1];
$('div.toggler').each(function(index) {
var attribut = $(this).attr('id');
$(this).removeClass('ui-accordion-header-active ui-state-active ui-corner-top active');
$(this).next('.accordion').removeClass('ui-accordion-content-active');
$(this).next('.accordion').css('display', 'none');
$(this).attr('aria-selected', 'false');
$(this).attr('aria-expanded', 'false');
$(this).attr('tabindex', '-1');
$(this).next('.accordion').attr('aria-hidden', 'true');
if ( navId == attribut ) {
$(this).addClass('ui-accordion-header-active ui-state-active ui-corner-top active');
$(this).next('.accordion').addClass('ui-accordion-content-active');
$(this).next('.accordion').css('display', 'block');
$(this).attr('aria-selected', 'true');
$(this).attr('aria-expanded', 'true');
$(this).attr('tabindex', '0');
$(this).next('.accordion').attr('aria-hidden', 'false');
$(document).accordion('option', 'active', index );
}
});
});
$('.mod_sitemap > .level_1 > .submenu > .level_2 > li > a').click(function() {
var navId = $(this).attr('href').split('#')[1];
$('div.toggler').each(function(index) {
var attribut = $(this).attr('id');
$(this).removeClass('ui-accordion-header-active ui-state-active ui-corner-top active');
$(this).next('.accordion').removeClass('ui-accordion-content-active');
$(this).next('.accordion').css('display', 'none');
$(this).attr('aria-selected', 'false');
$(this).attr('aria-expanded', 'false');
$(this).attr('tabindex', '-1');
$(this).next('.accordion').attr('aria-hidden', 'true');
if ( navId == attribut ) {
$(this).addClass('ui-accordion-header-active ui-state-active ui-corner-top active');
$(this).next('.accordion').addClass('ui-accordion-content-active');
$(this).next('.accordion').css('display', 'block');
$(this).attr('aria-selected', 'true');
$(this).attr('aria-expanded', 'true');
$(this).attr('tabindex', '0');
$(this).next('.accordion').attr('aria-hidden', 'false');
$(document).accordion('option', 'active', index );
}
});
});
});
})(jQuery);
</script>
Zur Funktion:
Das Akkordeon liegt auf einer Seite auf Navigationsebene 1. Kann aber über Unterpunkte (Ebene. 2) direkt auf ein Akkordeon-Element springen. Wenn man nun auf dieser Seite schon ist, haben die oben genannten Lösungen mich zwar zu dem Anker gebracht, leider ohne dass das angesprungene Akkordeon aufgegangen ist. Mit meinem Ansatz ist das nun möglich, da ich auch eine Sitemap habe ist fast alles doppelt. Kann man das irgendwie vereinfachen? Getestet habe ich das aufm Mac mit der jeweils neuesten Version von: Chrome, FF, Safari
Anpassungen am Akkordeon Template mussten auch gemacht werden.
Das ganze könnte auch noch etwas kleiner werden:
PHP-Code:
$('.mod_navigation > .level_1 > .submenu > .level_2 > li > a').click(function() {
var navId = $(this).attr('href').split('#')[1];
$('div.toggler').each(function(index) {
var attribut = $(this).attr('id');
if ( navId == attribut ) {
$(document).accordion('option', 'active', index );
}
});
});
hier macht aber leider der Safari nicht mit.
Gerne nehme ich Verbesserungsvorschläge entgegen.
Viele Grüße
Flox
Accordion direkt anspringen und aufklappen (j_accordion)
Zitieren
Zitat von Anke
Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.
Lesezeichen