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:

Dragosius

Erfahrenes Mitglied
localstorage sagt mir persönlich gar nichts.
Was ist da denn der Unterschied?

Auf jeden Fall schon mal vielen Dank für den Code.
 

Dragosius

Erfahrenes Mitglied
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:
 
Zuletzt bearbeitet:

basti1012

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

Dragosius

Erfahrenes Mitglied
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:

Ich kann die Box aber nach dem 1. Klick nicht mehr ausblenden.
 

basti1012

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

Dragosius

Erfahrenes Mitglied
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 :)
 

basti1012

Erfahrenes Mitglied
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 ?
 

Dragosius

Erfahrenes Mitglied
Danke dir für die Rückmeldung.

Bein mir funktioniert es leider noch nicht:

Ich habe da auch eine allgemeine Frage:
Der Code von jeder Box ist ja total identisch.
Woher weiß das Script denn, bei welcher Box ist geklickt habe?
 

basti1012

Erfahrenes Mitglied
Bein mir funktioniert es leider noch nicht:
Was habe ich dir letztens gesagt wegen script im head ?
Wenn dann nach unten oder das domcontenloadet drumherum fummeln.

Woher weiß das Script denn, bei welcher Box ist geklickt habe?
Ja das Script ist schlau.
document.queryselectorAll ließt mit der foreach Schleife alle Container ein.
Wenn man jetzt eine anklickt wird jedesmal eine Klasse gesetzt oder wieder gelöscht.
Bei jeden klick wird gleichzeitig true oder false im localstorage gespeichert damit beim Seiten neuladen das so aussieht wie du es verlassen hast
 

EuroCent

Klappstuhl 2.0
Kann man das hier eigentlich auch vermeiden, da dies ja scheinbar bald nicht mehr funktionieren wird?
Anhang anzeigen 66422
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 :)

Schau mal hier: Google Chromes SameSite Update: Marketer fürchten Bedrohung für Third Party Cookies | OnlineMarketing.de

@basti1012 Das ist sicherlich auch für Dich interessant oder? :)
 

basti1012

Erfahrenes Mitglied
Ich hatte es auch testweise mal ans Ende gesetzt, da ging es nur ebenfalls nicht.
Jetzt habe ich das documentload eingebaut und leider kein Unterschied.
wo hast du das den stehen ?

Code:
.aus{
  display:none;
}
Ohne das geht es nicht.
Der Code classList.add('aus'); sagt das er eine Klasse einsetzen möchte die .aus heißt.
Kopiere die 3 Zeilen irgendwo in der Css rein dann sollte es gehen.
@basti1012 Das ist sicherlich auch für Dich interessant oder?
Ja danke, werde ich mir aufjedenfall mal durchlesen.
 

Dragosius

Erfahrenes Mitglied
Code:
.aus{
  display:none;
}
Ohne das geht es nicht.
Der Code classList.add('aus'); sagt das er eine Klasse einsetzen möchte die .aus heißt.
Kopiere die 3 Zeilen irgendwo in der Css rein dann sollte es gehen.

Ich hatte übersehen, dass du die css-Klasse umbenannt hattest.
Jetzt sieht das aus- bzw einklappen gut aus. :)

Kann man das Wort "ausblenden" hier noch dynamisch darstellen, so dass hier entweder "ausblenden" oder "einblenden" steht?
 

Dragosius

Erfahrenes Mitglied
Später möchte ich dafür gerne Fotn Awesome-Icons verwenden.
Das sollte da aber kein Problem darstellen, denke ich mal.

z.B.
<span class="icon icon24 fa fa-plus-circle nachrichten-iconfarbe"></span>
<span class="icon icon24 fa fa-minus-circle nachrichten-iconfarbe"></span>
 

EuroCent

Klappstuhl 2.0
Später möchte ich dafür gerne Fotn Awesome-Icons verwenden.
Das sollte da aber kein Problem darstellen, denke ich mal.

z.B.
<span class="icon icon24 fa fa-plus-circle nachrichten-iconfarbe"></span>
<span class="icon icon24 fa fa-minus-circle nachrichten-iconfarbe"></span>

Das kannst Du durchaus verwenden :)
Entweder per CSS oder beide Elemente hinterlegen.

Entweder dann beides ausblenden, oder eines einblenden welches Standard wird. :)

Font-Awesome verwendet aber soweit Ich weiß nur fas, far fa-DASICON :D
far = Regular
fas = Solid
 

Forum-Statistiken

Themen
272.355
Beiträge
1.558.612
Mitglieder
187.829
Neuestes Mitglied
AlDi31