title: Setting cookies for a collapsable jQuery menu when using .toggle()
body: <p>I'm trying to set up cookies on a collapsable vertical list, I'm using .toggle() to hide and show the list and <a href="http://plugins.jquery.com/files/jquery.cookie.js.txt" rel="nofollow">jQuery Cookie Plugin</a>. I have really simple nav like this:</p>
  
  <pre><code>&lt;ul class="menu-sidebar"&gt;
    &lt;li&gt;Item 1&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;Item 2.1&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item 3&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;Item 3.1&lt;/li&gt;
      &lt;/ul&gt;
   &lt;/li&gt;
   &lt;li&gt;Item 4&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>With following CSS:</p>
  
  <pre><code>.js .menu-sidebar li ul{display:none;}
  </code></pre>
  
  <p>Then I toggle the list like this:</p>
  
  <pre><code>jQuery(document).ready(function(){
    $('.menu-sidebar li:has(ul) a').click(function(){
      $(this).next().toggle();
    });
  });
  </code></pre>
  
  <p>It's simple and works great but I can't really wrap my head around how to se cookies on that. I've been trying to do it like this:</p>
  
  <pre><code>$('.menu-sidebar li:has(ul) a').click(function(){
    $(this).next().toggle();
  
    if ($(this).next().is(':visible')){
      $.cookie('verticalNav', 'expanded');
    }
  
    if ($(this).next().is(':hidden')){
      $.cookie('verticalNav', 'collapsed');
    }
  
    var verticalNav = $.cookie('verticalNav');
    if (verticalNav == 'expanded'){
      $(this).next().show();
    }
  });
  </code></pre>
  
  <p>With no luck. Any tips? Thanks! :)</p>