Aus- bzw Einklappen der Box in den Cookies speichern

Dragosius

Erfahrenes Mitglied
Hallo zusammen,

ich habe folgenden Code, um eine Box aus- bzw einklappen zu können.
HTML:
<script language="JavaScript">
function div_change(strID){
    document.getElementById(strID).style.display = (document.getElementById(strID).style.display == 'none' ) ? 'block' : 'none';
    document.getElementById(strID + "_shown").style.display = (document.getElementById(strID + "_shown").style.display == 'none' ) ? 'block' : 'none';
    document.getElementById(strID + "_hidden").style.display = (document.getElementById(strID + "_hidden").style.display == 'none' ) ? 'block' : 'none';
}
</script>

<section class="box">
    <h2 class="boxTitle">Test-Box <a href="javascript:/" onClick="div_change(1)">Div ein-/ausblenden</a><br><br></h2>
    <div class="boxContent">
        <div class="sidebarItemTitle" id="1">
            Der Inhalt dieses Divs wird immer ein und ausgeblendet.
        </div>
    </div>
</section>

Das funktioniert auch soweit super.

Ich habe da nur 2 Fragen:

1. Wie kann ich es machen, dass dies in den Cookies gespeichert wird, damit beim neu Laden der Seite oder wechseln der Seite die zuletzt gewählte Option weiterhin so angezeigt wird?
2. Wie kann ich für "Div ein-/ausblenden" unterschiedliche Texte anzeigen, also konkret einmal - und einmal +.


Vielen Dank
 
Zuletzt bearbeitet:
Muss das Cookie sein oder geht es auch mit localstorage ?

Mit cookie könnte es so aussehen

Link zur Lösung



Mit localstorage würde der Code noch kürzer werden
 
Zuletzt bearbeitet:
localstorage sagt mir persönlich gar nichts.
Was ist da denn der Unterschied?

Auf jeden Fall schon mal vielen Dank für den Code.
 
Ich habe es bei mir mal eingebaut, aber erhalte folgende Fehlermeldung:
Code:
Uncaught TypeError: te is null

Ich habe aber die Teile komplett kopiert gehabt.

Ich habe es testweise mal hier her kopiert, da tritt der gleiche Fehler auf:
https://testsystem.gekko-yume.de/test.htm
 
Zuletzt bearbeitet:
Im localstorage kann man auch Werte drinn speichern.
Wenn man will bis zu 10 Mb ca.
Im Cookie gehen solche größen nicht.

Dein Fehler ist ist das du das <script> vor den html kram hast, deswegen ist te ( id=box) noch nicht definiert.

Da kannst das lösen indem du das <script>blabla</script>vor den end </body> kopierst , oder ein onload Event nutzt
 
Ist es denn weiterhin valid, wenn der Script-Teil danach kommt?
Ich habe es zumindest so gelernt, dass alle script-Teile in den Header-Teil kommen.

Den onload-Teil muss ich dann wo genau einbauen? :)

Ich habe es gerade mal angepasst:
https://testsystem.gekko-yume.de/test.htm
Ich kann die Box aber nach dem 1. Klick nicht mehr ausblenden.
 
Mit den onload event sollte das so klappen
HTML:
<!doctype html>
<html lang="de">
  <head>
<script>
  document.addEventListener("DOMContentLoaded", function(event) {
const a1 = document.cookie;
cookiename = a1.substring(0,a1.indexOf('='));
if(a1.indexOf(';') != -1){
      cookiewert = a1.substring(a1.indexOf('=')+1,a1.indexOf(';'));
}else{
      cookiewert = a1.substr(a1.indexOf('=')+1,a1.length);
}
 
klick=document.getElementById('anaus');
const bo=document.getElementById('box');
const te=document.getElementById('text');
 
if(cookiewert=='einblenden'){   
      bo.classList.remove('aus');
      te.innerHTML='ausblenden';
}else{
      te.innerHTML='einblenden';     
      bo.classList.add('aus');
}



klick.addEventListener('click',function(){
  const a1 = document.cookie;
  cookiename = a1.substring(0,a1.indexOf('='));
  if(a1.indexOf(';') != -1){
      cookiewert = a1.substring(a1.indexOf('=')+1,a1.indexOf(';'));
  }else{
      cookiewert = a1.substr(a1.indexOf('=')+1,a1.length);
  }
  if(cookiewert=='einblenden'){   
      bo.classList.add('aus');
      te.innerHTML='einblenden';
      ausein='ausblenden';
  }else{
      te.innerHTML='ausblenden';     
      bo.classList.remove('aus');
      ausein='einblenden';
  }
 
  var a = new Date();
  a = new Date(a.getTime() +1000*60*60*24*365);
   document.cookie = 'meincookie='+ausein+'; expires='+
                  a.toGMTString()+';';
})
});
</script>
  </head>
  <body>
<section class="box">
  <h2 id="anaus" class="boxTitle">Test-Box <a href="#">Div <span id="text">ausblenden</span></a><br><br></h2>
    <div class="boxContent">
        <div id="box">
            Der Inhalt dieses Divs wird immer ein und ausgeblendet.
        </div>
    </div>
</section>
</body>
</html>
Deine Testseite funktioniert bei mir.
Lösche erstmal den Cookie aus dein Browser und starte die Seite neu.
Wahrscheinlich hat der Cookie den falschen Wert gespeichert oder so weil dein vorheriger Versuch ja nicht lief.

Cookies kannst du auch in der Console löschen , das hat den Vorteil das du auch nur ein einzelnen Cookie löschen kannst und nicht den kompletten kram löschen mußt
 
Super, Danke dir es funktioniert. :)

Jetzt hätte ich noch 2 Fragen:

1.
Wie kann ich es einstellen. dass die Boxen standardmäßig ausgeklappt sind?

2.
Ich möchte gerne mehrere Boxen separat mit dem auf- und zuklappen auf der gleichen Seite verwenden.
Kann ich das irgendwie lösen, ohne dass ich den ganzen Code kopieren muss?

Falls es einfacher ist, kann man es auch gerne mit " localstorage" lösen. :giggle:


Kann man das hier eigentlich auch vermeiden, da dies ja scheinbar bald nicht mehr funktionieren wird?
1595887180755.png
Code:
Einige Cookies verwenden das empfohlene "sameSite"-Attribut inkorrekt. 2
Das Cookie “meincookie” wird in Zukunft bald abgelehnt werden, da es für das Attribut "sameSite" entweder "none" oder einen ungültigen Wert angibt, ohne das "secure"-Attribut zu verwenden. Weitere Informationen zum "sameSite"-Attribut finden Sie unter https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite test.htm:53:20
Das Cookie “meincookie” wird in Zukunft bald abgelehnt werden, da es für das Attribut "sameSite" entweder "none" oder einen ungültigen Wert angibt, ohne das "secure"-Attribut zu verwenden. Weitere Informationen zum "sameSite"-Attribut finden Sie unter https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite


Danke sehr :)
 
Kann man das hier eigentlich auch vermeiden, da dies ja scheinbar bald nicht mehr funktionieren wird?
Das kann ich dir auch nicht richtig beantworten,würde mich auch mal interesieren.

Mit mehreren Boxen sollte das auch funktionieren.
Nur dann sollte man auf localstorage umstellen weil bei vielen boxen wäre es einfacher.

Mit einer offenen Box beginnen geht auch , doch dann muß man das umdrehen.
wo remove steht muss add hin und so weiter.
Das kann ich jetzt schlecht erklären.
Wie viele Boxen hast du dir den gedacht ?
 

Neue Beiträge

Zurück