Question

I use this links and divs on my site:

<p><a href="#" class="navlink" id="navlink_1">Menu1</a> | <a href="#" class="navlink" id="navlink_2">Menu2 |</a><a href="#" class="navlink" id="navlink_5"> Menu 3|</a></p>

<div id="menu_1" class="mymenu">
</div>
<div id="menu_2" class="mymenu">
</div>
<div id="menu_3" class="mymenu">
</div>

And this jquery to hide and show the menu.

$('div[class*="mymenu"]').hide(); 
 var current;
       var showMenu = function(e) {
    // read the id out of the clicked elements id ('navlink_ID')
        var id = e.id.split('_');
        $('div#menu_' + id[1]).show();
    // store this element as new current visible
        current = e;
      }

      // hide all menu elements
      $('div.mymenu').hide();
      $('a.navlink').click(function() {
        if (this != current) {
          // check if an element is visible -> hide it and show new menu
          if (current) {
            var id = current.id.split('_');
            $('div#menu_' + id[1]).hide(200,showMenu(this));
          } else {
            showMenu(this);

          }
        }
        return false;
      }); 

How can i modify this code, if i reload the page, then the last visible DIV is stay visible. (i dont want to use query string for this. I try with jquery session but not work..)

Thank you for help…

Answer 1

Cookies would be the ideal way to persist your collapsible divs, ShopDev has an excellent tutorial on how to acheive the same thing as you are attempting to do, using the jQuery cookie plugin.

Basically you set a value in the cookie for each div that you want to persist and whenever the event happens you update the value in the cookie, e.g.:

$.cookie('menu_1', 'expanded');

Also you need to check when the page is first loaded the state of each div, e.g.

var menu_1 = $.cookie('menu_1');

if (menu_1 == 'collapsed') {
    $('#menu_1').css("display","none");
};