Aktives Akkordeon-Element mittels Hash-Wert in der URL steuern
Funktioniert ab Contao-Version 3.* (für Contao-Versionen bis einschließlich 3.2.* bitte ersten Punkt bei Variationen beachten).
Kurzbeschreibung:
Durch die Modifikation wird ...
- ... durch die Angabe des Hash-Wertes eines Akkordeon-Elements in der URL festgelegt, welches Element zu Beginn aufgeklappt sein soll.
- ... der Hash-Wert an das jeweils geöffnete Akkordeon-Element angepasst.
- ..., sofern andere Links auf der Seite auf den Hash-Wert eines Akkordeon-Elementes verweisen, dieses auch bei Klick auf den Link geöffnet.
- ... die Änderung des Hash-Wertes in der Browser-History gespeichert, sodass man mittels des Zurück- und Vorwärts-Buttons die Hash-Werte wieder aufrufen kann.
Demo:
https://europawochelauf.de/ablauf/ha....html#urkunden
Vorgehen:
- j_accordion.html5 mit unten angefügtem Code erstellen.
- Akkordeon-Element wie gewohnt anlegen und dabei eine CSS-ID angeben (z. B. urkunden).
- Wird beim Aufruf der Seite nun diese CSS-ID als Hash-Wert übergeben (z. B. https://europawochelauf.de/ablauf/ha....html#urkunden), wird das entsprechende Akkordeon-Element direkt aufgeklappt. (Hinweis: Sofern kein oder ein ungültiger Hash-Wert übergeben wird, wird standardmäßig das erste Element geöffnet.)
Variationen:
Um eine der folgenden Variationen zu nutzen, müssen im Code die mit comment alteration # gekennzeichneten Zeilen auskommentiert (oder gelöscht) und bei den mit uncomment alteration # gekennzeichneten Zeilen der Kommentar entfernt werden:
- Verwendung des Skriptes bis einschließlich Contao 3.2.*.
- Beim Aufruf der Seite von einem separaten Link springt die Seite nicht zu dem zu Beginn geöffneten Element.
- Bei keinem oder einem ungültigen Hash-Wert wird kein Element aufgeklappt.
- Änderung des Hash-Wertes wird nicht in der Browser-History gespeichert.
Code:
HTML-Code:
<script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo $GLOBALS['TL_ASSETS']['JQUERY_UI']; ?>/jquery-ui.min.js"></script><!-- comment for alteration 1 -->
<!-- <script src="<?php echo TL_ASSETS_URL; ?>assets/jquery/ui/<?php echo JQUERY_UI; ?>/jquery-ui.min.js"></script> --><!-- uncomment for alteration 1 -->
<script>
(function($) {
$(document).ready(function() {
// var hash = window.location.hash.replace('#', '');
// if (hash && $('section#' + hash + '.ce_accordion').length) {
// setTimeout(function() {
// window.scrollTo(0, 0);
// }, 1);
// } // uncomment block for alteration 2
var chosen = function() {
var hash = window.location.hash.replace('#', '');
if (hash === '') return null;
return document.getElementById(hash);
};
var active = 0; // comment for alteration 3
// var active = false; // uncomment for alteration 3
var element = chosen();
if (element !== null) {
active = $('section.ce_accordion').index(element);
}
$(document).accordion({
// Put custom options here
active: active,
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');
var id = ui.newHeader.parent().attr('id'),
hash = window.location.hash.replace('#', '');
if (id && id !== hash) {
history.pushState(null, null, window.location.pathname + '#' + id); // comment for alteration 4
// history.replaceState(null, null, window.location.pathname + '#' + id); // uncomment for alteration 4
}
}
});
$(window).on('hashchange', function() {
var element = chosen();
if (element !== null) {
$(element).children('div.toggler').trigger('click');
}
});
});
})(jQuery);
</script>
