Toggle change 2 DIV width at a time + localStorage
Question
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()">↔.</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.
2 answers
solution1
1 2020-07-12 17:27:17
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
solution2
1 ACCPTED 2020-07-12 17:41:24
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()">↔</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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.