Based on my previous question here and here, I found that I can set a cookie with javascript. I want to combine it with jquery to have a cookie state set for toggled table rows. I want to keep the hidden rows hidden upon reload.

Here is what I have achieved so far:

// Load cookies if any   
if(readCookie('togState')) {
       $('table#toggle tr.' + readCookie('togState')).hide();
    }

    $(function() {
        $('table#toggle tr.container').click(function() {
          var idTog = $(this).attr('id');
            $(this).toggleClass('off').nextAll('.' + idTog).toggle();
            setCookie('togState', idTog, 30);
            alert('Cookies: ' + readCookie('togState'));
        });

});

As you can see the cookie is read, but is not set upon browser refresh. What am I doing wrong?

What I want is hide any toggled rows (having their classes equal to their parent's container ID), if the parent container is clicked, and so the cookie is set.

Any help would be very much appreciated. Thanks.