Toggle image based on cookie value
- by danit
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?
