CODEWITHSUNDEEP
javascriptjqueryhtmlcss
amn
amn

Reputation: 29

Depending on hold the box after close it

When I click to the button and close my box with jQuery ( Toggle ) ,If the box closed I want to box will depend on hold after I refresh the page . Or If it's Open ,after I refresh the page It will stay open.
I don't know the code that help me do what I want .
For example I wrote a code when we click on red Square , the blue square will be disappear and when we click on it again the blue square will be appear . but there is a problem that after I refresh the page My data or changes will be forgotten .
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();
  });
});

Upvotes: 3

Views: 71

Answers (2)

ManirajSS
ManirajSS

Reputation: 2375

If you want restrict this functionality to the particular session you can use this...

$(document).ready(function(){
                             if(sessionStorage.isVisible == "false" ){
                                 $(".box").hide();
                                 sessionStorage.isVisible = "true";
                             }
                             else
                                 sessionStorage.isVisible = "false";
  $(".close-open").click(function(){           
    sessionStorage.isVisible = $(".box").toggle().is(':visible');
  });
});

fiddle Demo

Upvotes: 0

Alex Char
Alex Char

Reputation: 33218

You can achieve this with some ways. I will show one with Web Storage:

js

$(document).ready(function(){
    var isClose = localStorage.getItem("isClose");
    if(isClose == "false"){
        $(".box").hide();
    } 

  $(".close-open").click(function(){
    $(".box").toggle(
        function(){
            localStorage.setItem("isClose", $(this).is(':visible'));
        });
  });
});

fiddle

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

Upvotes: 3

Related Questions