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

Question

Im 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 corresponding to the div that was clicked, and the reverse. Im new to jquery, how would i save the state of these 'clicked' div's to a cookie to show which were hidden etc??

Thanks for any help.

<script type="text/javascript">

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

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

</script>

HTML;

DIV's that are hidden/shown on click.....

<div class="column" id="col0">

<div class="portlet" id="p_0">
  <div class="portlet-header">Feeds</div>
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit
  </div>
</div>
<div class="portlet" id="p_1">
  <div class="portlet-header">News</div>
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit
  </div>
</div>

</div>

etc....

DIV's that class is applied to.....

<div id="content-footer">
  <div id="p_0"></div>
  <div id="p_1"></div>
  <div id="p_2"></div>
  <div id="p_3"></div>
  <div id="p_4"></div>
</div>

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

Answer 2

Hiya

I posted a demo of what I think you want here. Be sure to include the jQuery cookie plugin.

Here is the HTML I used:

<div class="column" id="col0">

<div class="portlet" id="p_0">
  <div class="portlet-header">Feeds</div>
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet" id="p_1">
  <div class="portlet-header">News</div>
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet" id="p_2">
  <div class="portlet-header">Extra</div>
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet" id="p_3">
  <div class="portlet-header">Other</div>
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet" id="p_4">
  <div class="portlet-header">Last</div>
  <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>

</div>

<div id="content-footer">
  <div name="p_0">p0 - Feeds</div>
  <div name="p_1">p1 - News</div>
  <div name="p_2">p2 - Extra</div>
  <div name="p_3">p3 - Other</div>
  <div name="p_4">p4 - Last</div>
</div>

And the script:

$(document).ready(function(){
 var cookie = $.cookie("hidden");
 var hidden = cookie ? cookie.split("|").getUnique() : [];
 var cookieExpires = 7; // cookie expires in 7 days, or set this as a date object to specify a date

 // Remember content that was hidden
 $.each( hidden, function(){
  var pid = this; //parseInt(this,10);
  $('#' + pid).hide();
  $("#content-footer div[name='" + pid + "']").addClass('add');
 })

 // Add Click functionality
 $('.portlet').click(function(){
  $(this).hide();
  $("#content-footer div[name=" + this.id + "]").addClass('add');
  updateCookie( $(this) );
 });
 $("#content-footer div").click(function(){
  $(this).toggleClass('add');
  var el = $("div#" + $(this).attr('name'));
  el.toggle();
  updateCookie( el );
 });

 // Update the Cookie
 function updateCookie(el){
  var indx = el.attr('id');
  var tmp = hidden.getUnique();
  if (el.is(':hidden')) {
   // add index of widget to hidden list
   tmp.push(indx);
  } else {
   // remove element id from the list
   tmp.splice( tmp.indexOf(indx) , 1);
  }
  hidden = tmp.getUnique();
  $.cookie("hidden", hidden.join('|'), { expires: cookieExpires } );
 }
}) 

// Return a unique array.
Array.prototype.getUnique = function() {
 var o = new Object();
 var i, e;
 for (i = 0; e = this[i]; i++) {o[e] = 1};
 var a = new Array();
 for (e in o) {a.push (e)};
 return a;
}

// Fix indexOf in IE
if (!Array.prototype.indexOf) {
 Array.prototype.indexOf = function(obj, start) {
  for (var i = (start || 0), j = this.length; i < j; i++) {
   if (this[i] == obj) { return i; }
  }
  return -1;
 }
}

---

Update: Added "indexOf" prototype at the end of the script above to fix an IE bug

Update #2: Added cookieExpires variable, use a number to set the number of days, set it as a date() to set an end date or "null" to set it as a session cookie.