Remembering last open state

Question

On the site http://www.ryancoughlin.com/hp/?c=posters, I am using this code for the left hand side:

$(".menu-header").click(function() {
        $(this).next().toggle('slow');
        return false;
}).next().hide();

If you open one of them and hit another section, it closes, is there any way to keep that state open?

Thanks,

Ryan

Answer 1

Your sections maintain their open-state fine, but they get closed when you open new page.

Your question does not disambiguate between these 2 concerns however.

What you might like do to to make it work on those pages is inject a variable to work out what page you're on.

   jQuery(function($){ 
     var matches;
     if( matches = (new String(document.location)).match(/\?c=\w+/) ) {  
        $("a[href=" + matches[0] + "]").parents("ul").toggle(); 
     }
   });

Aught to work as a short-term solution though.

So the full code would be ( annotated )

/* Document Ready, $ = jQuery inside this scope regardless  */

jQuery(function($){  

  /* Bind the click event on all the menus, then hide them all. */

  $(".menu-header").click(function() {
            $(this).next().toggle('slow');
            return false;
  }).next().hide();
  /*
   * Check to see if we're already on a sub-menu-item
   * By looking in the current pages url for the string '?c=somewordhere'
   */
  var matches;
  if( matches = (new String(document.location)).match(/\?c=\w+/) ) {  
    /*
     * If we are, search the page for a link to that submenu item
     * ( by looking for the '?c=somewordhere' part in the hrefs ) 
     * and find its parent menu `ul` and show it.
     */
    $("a[href=" + matches[0] + "]").parents("ul").toggle(); 
  }

}); # End Document Ready Scoping.

For clarities sake,

jQuery(function($){ 

});

Is a very handy shorthand notation which is very powerful. It's equivalent to doing

jQuery(document).ready(function($){ 

});

Which in turn is almost equivalent to doing

jQuery(document).ready(function(){ 
     var $ = jQuery; 
});

Which guarantees in a failsafe way that "$" will be jQuery inside this function regardless of everything else on the page.

Answer 2

I suggest using reallysimplehistory. It allows you to save state between page calls transparently (no need to mess with cookies, URL's, etc.)

You could also use Ajax for your site, but if you want the back button to work, you'd use something like RSH anyway. =]