Status eines Accordions beim Neuladen der Seite erhalten

[Lufine]

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

$("#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

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:

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

[zoglo]

Im LocalStorage des Clients speichern, hat nichts mit Contao zu tun und ist Anpassung.
Derzeit ist mir keine Contao-Erweiterung bekannt, welche das macht (unusual case)

Mehr Infos: https://developer.mozilla.org/en-US/...w/localStorage

Musst du dir mit JavaScript erweitern, folgende Suchanfragen sollten dir bei der Google helfen:

• accordion js state in local storage
• save state accordion js

Da du jQuery nutzt, einfach mal `jquery` anstatt `js` in den Suchen verwenden.

Edit:
Dein erstes Skript wird dir nicht helfen, da es auf eine ID geht, welche du wahrscheinlich nicht gesetzt hast.
Versuche hier mal die Klasse / ID zu ändern und teste es auf deiner Seite.

Bedenke, dass das Speichern im LocalStorage erst nach Initialisierung des JavaScripts von Contao erfolgen sollte.
Ob die von Contao genutzte Library eine Speicherung im LocalStorage erlaubt weiß ich nicht, das müsstest du recherchieren.

Versuche mal folgende Lösungsvorschläge:

• https://stackoverflow.com/questions/...orage-variable
• https://stackoverflow.com/questions/...-after-refresh

[Lufine]

Im LocalStorage des Clients speichern, hat nichts mit Contao zu tun und ist Anpassung.
Derzeit ist mir keine Contao-Erweiterung bekannt, welche das macht (unusual case)

Du meinst, das kann nicht funktionieren?

Dein erstes Skript wird dir nicht helfen, da es auf eine ID geht, welche du wahrscheinlich nicht gesetzt hast.
Versuche hier mal die Klasse / ID zu ändern und teste es auf deiner Seite.

Oder doch?

Versuche mal folgende Lösungsvorschläge:

https://stackoverflow.com/questions/...orage-variable
https://stackoverflow.com/questions/...-after-refresh

Ja, genau die Seiten habe ich auch bei meinen Recherchen gefunden und bin dabei auf das obige Skript gestoßen.
Vielleicht stehe ich ja gerade ein bisschen auf der Leitung, aber irgendwie verstehe ich Deine Antwort nicht so ganz: kann das Skript - mit kleinen Anpassungen - funktionieren oder nicht ?

[zoglo]

kann das Skript - mit kleinen Anpassungen - funktionieren oder nicht ?

Laut den gefundenen URLs sollte es klappen, also ja.

[mlweb]

Auch wenn es funktionieren kann, würde ich wohl eher den Weg über bedingte Formularfelder gehen oder kann es sein das ein Nutzer auch mehrere der im Akkordeon versteckten Formulare nacheinander ausfüllt?

Wenn nicht würde ich das mit folgenden Erweiterungen versuchen zu realisieren:

• terminal42/contao-mp_forms
• terminal42/contao-conditionalformfields
• und falls erforderlich cliffparnitzky/form-dependent-mandatory-field

Ich habe allerdings auch noch nicht getestet, ob diese Erweiterungen alle miteinander harmonieren. Ich hatte bisher nur die letzten beiden zusammen im Einsatz.

[Lufine]

Auch wenn es funktionieren kann, würde ich wohl eher den Weg über bedingte Formularfelder gehen oder kann es sein das ein Nutzer auch mehrere der im Akkordeon versteckten Formulare nacheinander ausfüllt?

Nein, das geht leider nicht. In jedem Akkordeon-Element befindet sich ein Modul von Cliffs Dokumentenmanagementsystem, was zwar am Ende auch nur ein Formular ist, aber deutlich erweiterte Funktionen hat ...
Daher scheiden die anderen von Dir vorgeschlagenen Lösungen leider auch aus.

[zonky]

Dabei wird die Seite immer wieder neu geladen.

Du könntest das Formular per Ajax updaten - Erweiterung dazu gibts von Richard oder T42

[Lufine]

So funktioniert es jetzt fast perfekt:

jQuery(function($) {
    $(document).accordion({
      // Put custom options here
      heightStyle: 'content',
      header: '.toggler',
      collapsible: true,
      active: false,
      animated: 'slide',
      create: function(event, ui) {
        ui.header.addClass('active');
        $('.toggler').attr('tabindex', 0);
      },
      
      //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("div.toggler").index(ui.newHeader[0]);
	        localStorage.setItem("accIndex", index);
	    },
	    // "|| 0" is used to activate first by default
	    active: parseInt(localStorage.getItem("accIndex")) || 0   
    });
  });

Wenn ich allerdings alle Akkordeons schließe und dann die Seite nochmal aufrufe, wird immer das erste Akkordeon automatisch geöffnet. Das sollte ja mit "active: false," eigentlich verhindert werden und wurde bislang auch.

active: parseInt(localStorage.getItem("accIndex")) || 0

scheint das nun aber zu verhindern. Was trage ich nun statt der 0 ein?

Hat jemand eine Idee?

[Lufine]

Hab's selber rausgefunden ;-)

Es muss

active: parseInt(localStorage.getItem("accIndex")) || false

heißen.

[Lufine]

Hab's selber rausgefunden ;-)

Es muss

active: parseInt(localStorage.getItem("accIndex")) || false

heißen.

Hm, das funktioniert leider nicht wie gewünscht. Wenn jetzt nämlich im ersten Akkordeon gearbeitet wird, wird das Akkordeon beim Neuladen der Seite automatisch geschlossen