Concept for storing information in Jquery

Question

I have divs that are initially closed. The code below then controls the opening/closing:

$("p:contains('INVESTOR')").click(function() {
        if( $('#cs_investorServ').is(':hidden')) {
                $('#cs_investorServ').animate({opacity:'toggle', height: 'toggle'},'fast', function(){
                $('#cs_furlBar1 .cs_furlHeaderClosed').removeClass().addClass('cs_furlHeaderOpen');
                });

     } else {
                $('#cs_investorServ').animate({opacity:'toggle', height: 'toggle'},'fast', function(){
                $('#cs_furlBar1 .cs_furlHeaderOpen').removeClass().addClass('cs_furlHeaderClosed');});
                }
    });

My issue now is that there is a link within the div that is shown/hidden which takes a user to a different page w/more information. So, if the user returns to the first page, the div is shut again because I run a hide() on all divs initially. (client mandate)

How can I save the fact that a div is 'opened' upon returning to that page? I'm wondering if I can use the data method but not sure how I would construct that.

Since I have an if/else that checks for is:hidden, I just thought that another if/else would interfere with the if/else for hidden.

So, I want to toggle opening a div, then upon clicking inside that div and going to another page, when coming back to the original page, have the div where the click originated still be open.

I have this as the first action in the doc ready function: $('.cs_hideOpen').hide(); so not sure how to 'remove' that class but only when a user has shown a div and clicked from that div.

Answer 1

There is a plugin for jquery to allow you to set, read, and delete cookies - makes it easier then setting cookies via javascript. Find the plugin Here.

Just set the cookie when the div is unhidden. You can check for that cookie every time the page is loaded.

Answer 2

There are three ways to do this that come to mind.

• You could store the state of the DIVs on the server side in the users session, if they have one. You'd need to use AJAX to send the DIV state back to the server, and then flag the DIV in some way when it is generated by the server (add a class to it or something) so that it will be left open.
• You could store the state of the DIVs in a cookie. The cookies project on Google Code provides a clean API and integration with jQuery: http://code.google.com/p/cookies/
• You could store the state of the DIVs using HTML 5 local storage. Google search "html5 localstorage" for articles on the topic. Local storage is a new technology that is not available on older browsers (IE 6 and IE 7 for example).