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

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