Przełącz stan na div używając cookie.js po odświeżeniu strony jsFiddle

Mam prosty kod, który pozwala mi przełączać między dwoma div, które są opakowaniami dla dwóch podpowiedzi (# sub-nav-wrap jest alternatywnym nav). Są one przymocowane do dolnej części przeglądarki:

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

});

Chcę, aby stan każdego div był taki sam, jak wybrany przez użytkownika po odświeżeniu strony, a nawet jeśli kliknięcia nowego podtytułu menu pozostaną takie same, zamiast uciekać się do stanu domyślnego.

HTML jest następujący:

<!--- 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>

CSS to:

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

To jest moje pierwsze pytanie, i łamałem sobie głowę, żeby to działało przy użyciu innych podobnych kodów z tej strony, ale nic nie działa. Będzie wdzięczny za wszelką pomoc ...

David

SkonstruowałemjsFiddle aby pokazać, jak działa nawigacja bez pliku cookie.To to moja próba użycia plików cookie. Mam nadzieję, że jest to coś prostego i właśnie tęsknię za zrozumieniem ...

questionAnswers(2)

yourAnswerToTheQuestion