Hide and Show content based on Cookie value

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?

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).

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!

If you want to write plain JS to do this you might try:

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);
    });
 });