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:

  $('.boxCategories ul > li ul')
  $('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) {
        .find('> li ul:visible')
      .stop(true, true)

And here is an example of the list markup:

<ul id="mainmenu-nav">
        <li class="li-nav">
            <a href="">Section 1</a>
            <ul class="ul-nav">
                    <li class="li-nav">
                         <a href="">Product</a>

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?