Using Cookies to save slideToggle current state

I need a little assistance getting started on how to use the cookie plugin.

I have a basic nav, ul inside of a ul, and using slideToggle to show/hide the sections. I would like it to keep its current state after the page is refreshed. I have seen examples oh how people have done this with single divs, but the cookie code is a bit confusing to me. If anyone can point me in the right direction, or get me started in my specific example, I would be very much appreciative.

Here is my current script:

$(document).ready(function(){
    $('.navHeader').children(".subNav").hide();

    $('.navHeader').on('click', function(){
        $(this).children('.subNav').slideToggle(100);
        $(this).siblings().children('.subNav').slideUp(100);
    });
});

Here is my HTML:

<nav id='navMenu'>
    <ul class='mainNav'>
        <li class='navHeader'>Section 1
            <ul class='subNav'>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
            </ul>
        </li>
        <li class='navHeader'>Section 2
            <ul class='subNav'>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
            </ul>
        </li>
        <li class='navHeader'>Section 3
            <ul class='subNav'>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
            </ul>
        </li>
        <li class='navHeader'>Section 4
            <ul class='subNav'>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
            </ul>
        </li>
    </ul>
</nav>

Thanks for any and all assistance.

Answers


You can read about cookies here: http://www.quirksmode.org/js/cookies.html

It also contains functions you can readily use in your code.

Edit: Start reading about cookies there, then try by yourself to implement what you need. If you need further assistance please let us know. It is always best to try and get it done because it will earn you some valuable experience. You don't really need a jQuery plugin for this task, but that is just my opinion.


Need Your Help

Flash AS3 Mysterious Blinking MovieClip

flash actionscript-3 movieclip addchild

This is the strangest problem I've faced in flash so far. I have no idea what's causing it. I can provide a .swf if someone wants to actually see it, but I'll describe it as best I can.

Adobe AIR and Appcelerator Titanium for desktop application

air titanium

Which would be better (performance and development time) for me if I'm creating an desktop application using HTML/CSS/JS?