Hide and Show content based on Cookie value

Question

Here is my Jquery:

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

When you click #tool img #wrapper is hidden along with .chelp.

I need to control this with a cookie, so when the user hides #wrapper it remains hidden on all pages or when they re-visit the page.

I know there is a jQuery Cookie plugin, but I'd like to do this with plain Javascript rather then including another plugin.

Can anyone tell me how i can build in it in plain javascript and merge with the JQuery to create a cookie, then check the cookie each time the page loads to see if #wrapper should be hidden or displayed?

Answer 1

If you want to write plain JS to do this the primary source to get the cookie started should probably be:

http://www.w3schools.com/js/js_cookies.asp

so you might:

function setCookie(c_name,value,expiredays)
{
  var exdate=new Date();
  exdate.setDate(exdate.getDate()+expiredays);
  document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toUTCString());
}
function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=");
  if (c_start!=-1)
    {
    c_start=c_start + c_name.length+1;
    c_end=document.cookie.indexOf(";",c_start);
    if (c_end==-1) c_end=document.cookie.length;
    return unescape(document.cookie.substring(c_start,c_end));
    }
  }
return "";
}
var default_state = getCookie("state");
if(default_state == "hidden") {
  $("#wrapper").hide();
}
$("#tool").click(function() {
    $(".chelp").slideToggle();
    $("wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() {
    $("#tool img").toggle();
    setCookie('state','hidden',365);
    });
 });

Answer 2

You can set cookies in javascript with document.cookie W3C rundown here. If you grab the functions from that tutorial, I think something like this is what you want:

$("#tool").click(function() {
    $(".chelp").slideToggle();
    if(!getCookie("shownWrapper")) {
        setCookie("shownWrapper", "true", null);
        $("wrapper").animate({ opacity: 1.0 },200).slideToggle(200, function() {
            $("#tool img").toggle();
        });
    }
});

Good luck!

Answer 3

There are numerous example of cookie getters/setters. Pick one thats easier for you to use. Here is one. Use the createCookie function to store the visibility state when it changes, use the readCookie function on page load.

Answer 4

The Cookie extension is light enough that you don't have to create a new file--just insert it into your main javascript file. I've done so and it works just fine.

To use plain javascript and reintegrate it with jQuery would essentially be to use a plugin anyway. (Taking a look at Cookie's short raw code is a good way to see how to write your own plugin, in fact.)

Update

Here's some basic jQuery you can use to test for and set the cookie.

    if ( $.cookie("hide-alert") == "true" ) {
        $("#legal-alert").hide();
    }
    $("#legal-alert").append("<div class='close-alert' title='Close'>x</div>");
    $(".close-alert").live("click", function() {
        $(this).parent(".alert").slideUp();
        $.cookie("hide-alert", "true", { expires: 365 });
    });

All the documentation you need is in the plugin itself (which I deleted in order to make it small enough to put into my js file directly). Obviously, you can change 'expires' and such. Note that the above code sets a button to close/hide the box, and then sets a live listener for onClick, which is what hides the box you want to hide (I called it '#legal-alert' above).