Keep toggle state on divs using cookie.js after page refresh
===

I have a simple code which allows me to toggle betwen two divs which are wraps for two sub navigations (#sub-nav-wrap is the alternative nav). They are fixed to the bottom of the browser :

    $(function(){
    $('.button').click(function(){
        $('#sub-nav-wrapmin').toggle();
		$('#sub-nav-wrap').toggle();
    });	
});

What I wish to do is to keep the state of each div the same as chosen by the user after page refresh and even if the clicks on a new sub-heading the menu will remain the same, rather then resorting to the default state.

The html is this:

    <!--- Main Sub Wrap --->
    <div id="bottom-wrap">
    <!-- Mini Sub Nav -->
    
    <div id="sub-nav-wrapmin" class="snWrap divone">
            <div id="sn-contentmin">
            	<div id="sn-likemin"></div> 
                <div id="sn-coffeesml"></div>
                <div id="sn-sharemin"></div>
                <div id="sn-commentsml"></div>
                <div id="toggle-barmin">
    					<div id="sn-sidebrdrmin"></div>
                    	<div class="sn-toggle button"></div>
               </div>
                  <ul class="sn-comicsmin menu">
      				<li><a class="sn-comics" style="background-position: right top" href="#comic.html">Comic</a></li>
      				<li><a class="sn-archive" href="#archive.html">Archive</a></li>
      				<li><a class="sn-vote" href="#vote.html">Vote</a></li>
            		<li><a class="sn-spotlight" href="#spotlight.html">Spotlight</a></li>
    			</ul>
          </div>
    </div>
    <!-- Sub Nav -->
    <div id="sub-nav-wrap" class="snWrap divtwo">
    	<div id="sub-nav-container">
        	 <div id="sub-nav-content">
        			
                    <div id="sn-bnrlft"></div>
        			<div id="sn-bnrrgt"></div>
        			<div class="sn-dividelft"></div>
        			<div class="sn-dividergt"></div>
                    <div id="sn-likebg"></div>
                    <div id="sn-coffeebtn">
                    </div>
                    <div id="sn-sharebtn"></div>
        			<div id="sn-commentbtn"></div>    
                    <div id="toggle-bar">
    					<div id="sn-sidebrdr"></div>
                    	<div class="toggle button"></div>
                    </div>            
        	</div>
        	<div id="sub-nav-brdr">
    			<ul class="sub-nav-comics menu">
      				<li><a class="comics" style="background-position: right top" href="#comic.html">Comic</a></li>
      				<li><a class="archive" href="#archive.html">Archive</a></li>
      				<li><a class="vote" href="#vote.html">Vote</a></li>
            		<li><a class="spotlight" href="#spotlight.html">Spotlight</a></li>
    			</ul>
       		</div>
        </div>
    </div>

    

The CSS is this:

   

    #sub-nav-wrap {
    	display: none;	
    }
    

This is my first time asking, and I have been wracking my brains to get this to work using other similar codes from this site, but nothing is working.
Please help...

David 


