CODEWITHSUNDEEP
javascriptjqueryhtml
Filip
Filip

Reputation: 147

Keep toggle value on page refresh

I want to keep the toggle value on page refresh. I try to do this with cookies but it does not work, I can not put them right and can not figure it out how.

Javascript:

      $("div#unu").click(function(){
          $("div#autori").slideToggle();
          document.cookie="autori";
      });
      if(document.cookie == 'autori'){        
          $('div#unu').click();
      }

HTML

<div id="unu">Autori</div>
<div id="autori" hidden>
     <ul>
        <li>Mark Twain</li>
        <li>Mark Twain</li>
        <li>Mark Twain</li>
        <li>Mark Twain</li>
        <li>Mark Twain</li>
    </ul>
</div>

Fiddle

Upvotes: 0

Views: 525

Answers (1)

vultix
vultix

Reputation: 358

You need to add a callback to the slideToggle function and in there set the localStorage toggle to either true or false if the element is toggled or not using this code:

if ($("div#autori ").is(":visible")) {
     localStorage.setItem('toggle', "true");
} else {
    localStorage.setItem('toggle', "false");
}

Then when the page first loads check for that. Here is a working jsFiddle: http://jsfiddle.net/69QTx/

Upvotes: 2

Related Questions