Toggle change 2 DIV width at a time + localStorage

user_12737707 0
Viewed 61

function myFunction() {
   var element = document.getElementById("one1");
   element.classList.toggle("one2");
   var element = document.getElementById("two1");
   element.classList.toggle("two2");
}
<style>
#section{margin-left:50px;
margin-right:50px
}
#monbouton{float:right;
font-size:25px;
width:50px;
height:50px;
background-color:#F1F1F1;
border:1px solid ##F1F1F1
}
#one1{
float:left;
width:40%;
height:100px;
border:1px solid blue
}
.one2{
width:10% !important;
height:200px;
border:1px solid red !important;
}
.one2 #afairedisparaitre{display:none
}
#two1{float:right;
width:59%;
height:100px;
border:1px solid green
}
.two2{width:89% !important
}
</style>
<!DOCTYPE html>
<html>
<body>
<div id="section">
<div id="one1">
<button id="monbouton" onclick="myFunction()">&#8596;</button>
    <div id="afairedisparaitre">This is DIV #one1<br />
    Button toggle to CLASS .one2<br />
  and reverse</div>
</div>
  <div id="two1">This is DIV #two1<br />
  Button toggle to CLASS .two2<br />
  and reverse</div>
</div>
</body>
</html>

I am trying to make the leftside of my website shrink, so that the users can have a wider rightside if they find it more confortable. What I am missing is a way that would keep the choice all over the site, when an other page is loaded, until the user clicks again. Maybe the solution would be a few more lines in js with "localStorage" ? I would really appreciate any help.

toggle switch-statement css javascript
2 Answers

Sure. Just create a localStorage variable that keeps track of whether the shrink should be active and use that to apply your styles on page load or something similar.

function shrinkActive() {
  var shrink;
  if (!(shrink = localStorage.getItem("shrink"))) {
    localStorage.setItem("shrink", "false");
    return false;
  }

  return JSON.parse(shrink);
}

function setShrink(active) {
  var element1 = document.getElementById("one1");
  var element2 = document.getElementById("two1");
  
  if (active) {
    element1.classList.add("one2");
    element2.classList.add("two2");
  } else {
    element1.classList.remove("one2");
    element2.classList.remove("two2");
  }
  
  localStorage.setItem("shrink", active.toString());
}

function myFunction() {
  setShrink(!shrinkActive());
}

window.onload = function() {
  setShrink(shrinkActive());
}

Link to working Codepen. https://codepen.io/bugcatcher9000/pen/pogZbrz?editors=1111

user_138778980

Made your CSS a bit better. Now we need to toggle only one class .with_toggle for #section.

It can sow errors here, in Snippet, but will fork fine on Codepan, see please. Try to switch it and reload the page on Codepan.

// checking if our storage is not empty
if (localStorage.toggled != '') {
  // set class to #section form storage value
  document.getElementById("section").classList.toggle(localStorage.toggled);
}

function myFunction() {
  if (localStorage.toggled != "with_toggle") {
    document.getElementById("section").classList.add("with_toggle");
    localStorage.toggled = "with_toggle";
  } else {
    document.getElementById("section").classList.remove("with_toggle");
    localStorage.toggled = "";
  }
}
#section {
  margin-left: 50px;
  margin-right: 50px;
}

#monbouton {
  float: right;
  font-size: 25px;
  width: 50px;
  height: 50px;
  background-color: #F1F1F1;
  border: 1px solid #F1F1F1;
}

#one1 {
  float: left;
  width: 40%;
  height: 100px;
  border: 1px solid blue;
}

.with_toggle #one1 {
  width: 10%;
  border: 1px solid red;
}

.with_toggle #one1 #afairedisparaitre {
  display: none;
}

#two1 {
  float: right;
  width: 59%;
  height: 100px;
  border: 1px solid green;
}

.with_toggle #two1 {
  width: 89%;
}
<div id="section">
  <div id="one1">
    <button id="monbouton" onclick="myFunction()">&#8596;</button>
    <div id="afairedisparaitre">This is DIV #one1<br /> Button toggle to CLASS .one2<br /> and reverse</div>
  </div>
  <div id="two1">This is DIV #two1<br /> Button toggle to CLASS .two2<br /> and reverse</div>
</div>

user_31871270
Related