Toggle image based on cookie value

Posted by danit on Stack Overflow See other posts from Stack Overflow or by danit
Published on 2010-05-06T11:28:15Z Indexed on 2010/05/06 11:38 UTC
Read the original article Hit count: 238

Filed under:
|
|

Im using a couple of JS functions to set a cookie named 'visible' with the value of either yes or no.

Essentially Im using these values to decide if a <div> is visible or hidden.

I've only just added the cookie, previously I had been using two images 1. Show 2. Hide as a button to hide and show the <div> like this:

HTML:

<img class="show" title="Show" alt="Show" src="images/show.png" />
<img class="hide" title="Hide" alt="Hide" src="images/hide.png" />

JQUERY:

  $("#tool").click(function() {
$(".help").slideToggle();
    $("#wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() {
     $("#tool img").toggle();
    });
  });

However I have now added the Cookie into the mix:

$("#tool").click(function() { if(get_cookie('visible')== null) { set_cookie('visible','no'); } else { delete_cookie('visible'); } $(".help").slideToggle(); $("#wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() { $("#slider img").toggle(); }); });

So the .toggle() no longer matches the state of the <div>

When the cookie value = no the show.png should be visible

When the cookie value = yes then the hide.png should be visible

Can anyone suggest how i can ammend this?

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about js