After clicking the button and closing my box with jQuery (Toggle), I want the state of the box to be remembered after refreshing the page. If the box was closed, it should remain closed upon refresh, and if it was open, it should stay open.
I am looking for a way to achieve this functionality in my code, as currently, any changes or data are lost upon page refresh.
For instance, I have written a code where clicking on a red square makes a blue square disappear, and clicking again makes it reappear. However, this behavior is not retained after refreshing the page.
DEMO
CSS :
.close-open {
background: red;
width: 50px;
height: 50px;
float: left;
}
.box {
background: blue;
width: 100px;
height: 100px;
float: left;
clear: left;
margin: 40px 0px 0px 0px;
}
HTML :
<span class="close-open"></span>
<div class="box">Test Box Toggle</div>
jQuery :
$(document).ready(function(){
$(".close-open").click(function(){
$(".box").toggle();
});
});