How do I keep an accordion menu state after a link is clicked?

I have been using the Sitepoint book jQuery from Novice to Ninja. I’m still very much a novice but I’m making some progress…

I have a jQuery accordion effect set-up on a a nested list. The effect is working great, however, I want to retain the menu state (e.g. which section is open) when a user clicks a particular link and the site loads a new page. I’m thinking I must need to use a cookie or similar but have no idea how to implement this.

How do I do this with jQuery? Any help appreciated…

Here is the jQuery I have currently:


$(document).ready(function(){
  $('.boxCategories ul > li ul')
    .click(function(e){
      e.stopPropagation();
    })
    .filter(':not(:first)')
    .hide();
    
  $('ul#mainmenu-nav > li > a').click(function(e) { e.preventDefault();
});
    
  $('.boxCategories ul > li, .boxCategories ul > li > ul > li').click(function(){
    var selfClick = $(this).find('ul:first').is(':visible');
    if(!selfClick) {
      jQuery(this)
        .parent()
        .find('> li ul:visible')
        .slideToggle();
    }
    
    $(this)
      .find('ul:first')
      .stop(true, true)
      .slideToggle();
  });
});

And here is an example of the list markup:

<ul id="mainmenu-nav">
        <li class="li-nav">
            <a href="http://www.link.co.uk/cat_3.html">Section 1</a>
            <ul class="ul-nav">
                    <li class="li-nav">
                         <a href="http://www.link.co.uk/cat_12.html">Product</a>
                     </li>

I’m thinking it must be possible with the jQuery cookie plugin (but as my skills are limited I’m not sure how to implement it - any pointers?