Status eines Accordions beim Neuladen der Seite erhalten
Ich verwende auf einer Seite ein Akkordeon mit mehreren 'Umschlag Anfang/Ende'-Elementen, in denen sich jeweils ein Formular befindet. Das Formular ist mehrseitig, d.h. die User:in wählt zunächst per Klick auf den Toggler aus, welches Formular ausgefüllt werden soll und wird dann in mehreren Schritten durch das Formular geleitet. Dabei wird die Seite immer wieder neu geladen. Das funktioniert eigentlich einwandfrei, nur schließt sich das Akkordeon nach jedem Laden der Seite natürlich wieder, d.h. der zuvor ausgewählte Toggler muss nach jedem Laden neu angeklickt werden.
Jetzt habe ich dieses Script gefunden, dass das eigentlich verhindern soll, weiß aber nicht wie ich es so anpasse, dass es funktioniert :o
Code:
$("#accordion").accordion({
//set localStorage for current index on activate event
activate: function(event, ui) {
//Find the index of the header. This can be the class|element you specify in the "header" init argument.
var index = $(this).find("h3").index(ui.newHeader[0]);
localStorage.setItem("accIndex", index);
},
// "|| 0" is used to activate first by default
active: parseInt(localStorage.getItem("accIndex")) || 0
});
Vermutlich muss h3 durch .toggler ersetzt werden und
Code:
active: parseInt(localStorage.getItem("accIndex")) || 0
muss auskommentiert werden aber dann bin ich mit meinem Latein auch schon am Ende. Hat jemand eine Idee?
j_accordion.html5 sieht momentan noch so aus:
Code:
<script src="<?= $this->asset('js/jquery-ui.min.js', 'contao-components/jquery-ui') ?>"></script>
<script>
jQuery(function($) {
$(document).accordion({
// Put custom options here
heightStyle: 'content',
header: '.toggler',
collapsible: true,
active: false,
create: function(event, ui) {
ui.header.addClass('active');
$('.toggler').attr('tabindex', 0);
},
activate: function(event, ui) {
ui.newHeader.addClass('active');
ui.oldHeader.removeClass('active');
$('.toggler').attr('tabindex', 0);
}
});
});
</script>
