title: Keep toggle state on divs using cookie.js after page refresh
body: <p>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 :</p>
  
  <pre><code>$(function(){
  $('.button').click(function(){
      $('#sub-nav-wrapmin').toggle();
      $('#sub-nav-wrap').toggle();
    });   
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>The html is this:</p>
  
  <pre><code>&lt;!--- Main Sub Wrap ---&gt;
  &lt;div id="bottom-wrap"&gt;
  &lt;!-- Mini Sub Nav --&gt;
  
  &lt;div id="sub-nav-wrapmin" class="snWrap divone"&gt;
          &lt;div id="sn-contentmin"&gt;
              &lt;div id="sn-likemin"&gt;&lt;/div&gt; 
              &lt;div id="sn-coffeesml"&gt;&lt;/div&gt;
              &lt;div id="sn-sharemin"&gt;&lt;/div&gt;
              &lt;div id="sn-commentsml"&gt;&lt;/div&gt;
              &lt;div id="toggle-barmin"&gt;
                      &lt;div id="sn-sidebrdrmin"&gt;&lt;/div&gt;
                      &lt;div class="sn-toggle button"&gt;&lt;/div&gt;
             &lt;/div&gt;
                &lt;ul class="sn-comicsmin menu"&gt;
                  &lt;li&gt;&lt;a class="sn-comics" style="background-position: right top" href="#comic.html"&gt;Comic&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class="sn-archive" href="#archive.html"&gt;Archive&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class="sn-vote" href="#vote.html"&gt;Vote&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class="sn-spotlight" href="#spotlight.html"&gt;Spotlight&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- Sub Nav --&gt;
  &lt;div id="sub-nav-wrap" class="snWrap divtwo"&gt;
      &lt;div id="sub-nav-container"&gt;
           &lt;div id="sub-nav-content"&gt;
  
                  &lt;div id="sn-bnrlft"&gt;&lt;/div&gt;
                  &lt;div id="sn-bnrrgt"&gt;&lt;/div&gt;
                  &lt;div class="sn-dividelft"&gt;&lt;/div&gt;
                  &lt;div class="sn-dividergt"&gt;&lt;/div&gt;
                  &lt;div id="sn-likebg"&gt;&lt;/div&gt;
                  &lt;div id="sn-coffeebtn"&gt;
                  &lt;/div&gt;
                  &lt;div id="sn-sharebtn"&gt;&lt;/div&gt;
                  &lt;div id="sn-commentbtn"&gt;&lt;/div&gt;    
                  &lt;div id="toggle-bar"&gt;
                      &lt;div id="sn-sidebrdr"&gt;&lt;/div&gt;
                      &lt;div class="toggle button"&gt;&lt;/div&gt;
                  &lt;/div&gt;            
          &lt;/div&gt;
          &lt;div id="sub-nav-brdr"&gt;
              &lt;ul class="sub-nav-comics menu"&gt;
                  &lt;li&gt;&lt;a class="comics" style="background-position: right top" href="#comic.html"&gt;Comic&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class="archive" href="#archive.html"&gt;Archive&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class="vote" href="#vote.html"&gt;Vote&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a class="spotlight" href="#spotlight.html"&gt;Spotlight&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS is this:</p>
  
  <pre><code>#sub-nav-wrap {
      display: none;  
  }
  </code></pre>
  
  <p>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...</p>