Jquery - save class state for multiple div #'s to a cookie?

Question

I\'m trying to replicate a UI effect as on http://mcfc.co.uk I have written a script that hides a div on click function and applies a class to a div with the #id correspondi

Answer 1

Since you're already using jQuery, you could take an advantage of that and use the very simple and easy-to-use plugin, Cookie:

You can see some demos here.

Or here:

$.cookie("myCookie", true);

alert($.cookie("myCookie")); // alerts true. but remember, it's always returned as a string.

Update with example on usage:

$(document).ready(function(){
    $('.portlet').click(function(){ 
        var idtext = this.id;
        $(this).hide();
        $("[id*="+ idtext +"]").not(this).addClass('add'); 
        $.cookie(idtext, false);
    });

    $("#content-footer div").click(function(){
        var idtext = this.id;   
        $(this).removeClass('add');                 
        $("[id*="+ idtext +"]").not(this).show();
        $.cookie(idtext, true);
    }); 
})

As you can see, we're setting the visible state of that current id (idtext) in a cookie with the value of either true or false. When loading these portlets you can check the cookie (either serverside or clientside, your choise) and serve the front end as desired. Tell me if you need anymore help :-)