title: Setting jQuery Cookie on collapse/expand menu (complicated)
body: <p>I'm trying to add jquery .cookies to my existing collapse/expand menu but for the life of me I can't see where I fail horribly.</p>
  
  <p>Can anyone help me figure this issue out? I've been looking at code for a little under 9 hours now and this is the last piece I was supposed to write today. I fear that my brain has literally reached it's limit but I can't stand leaving the work unfinished. It's probably something easy and I just can't see it.</p>
  
  <p>I've set the cookie as visible_state and what's supposed to happen, is every time a user clicks to expand/collapse/toggle an area of the menu, it stores the cookie as a class.</p>
  
  <p><strong>Edit</strong> : I forgot to mention...
  cexpand = the cookie class for expanded...</p>
  
  <p>ccollapse - the cookie class for collapsed</p>
  
  <p>My original .js (working menu)</p>
  
  <pre><code>$(document).ready(function() {
  setTimeout(function() {
    // Grow/Shrink
    $('#menu3 &gt; li &gt; a.expanded + ul').show('blind');
    $('#menu3 &gt; li &gt; a.collapsed + ul').hide('blind');
    $('#menu3 &gt; li &gt; a').click(function() {
    $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('&gt; ul').toggle('blind');
  });
  $('.expand_all').click(function() {
  $('#menu3 &gt; li &gt; a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('&gt; ul').show('blind');
  });
  $('.collapse_all').click(function() {
  $('#menu3 &gt; li &gt; a.expanded').addClass('collapsed').removeClass('expanded').parent().find('&gt; ul').hide('blind');
  });
  }, 0);
  });
  </code></pre>
  
  <p>My new .js</p>
  
  <pre><code>$(document).ready(function() {
  var visible_state = $.cookie("visible_state");
  setTimeout(function() {
  if ($('.expanded').attr('class')=='cexpand'){
    $(this).removeClass('cexpand');
    $(this).addClass('ccollapse');
    $.cookie('visible_state', 'ccollapse', { path: '/', expires: 100});
    $(this).hide('blind');
  } else if ($('.collapsed').attr('class')=='ccollapse'){
    $(this).removeClass('ccollapse');
    $(this).addClass('cexpand');
    $.cookie('visible_state', 'cexpand', { path: '/', expires: 100 });
    $(this).show('blind');        
  }   
    $('#menu3 &gt; li &gt; a.expanded + ul').show('blind');
    $('#menu3 &gt; li &gt; a.collapsed + ul').hide('blind');    
    $('#menu3 &gt; li &gt; a').click(function() {
    $(this).toggleClass('expanded', 'cexpand').toggleClass('collapsed', 'ccollapse').parent().find('&gt; ul').toggle('blind');
  });
  
  $('.expand_all').click(function() {
    $('#menu3 &gt; li &gt; a.collapsed').addClass('expanded', 'cexpand').removeClass('collapsed', 'ccollapse').parent().find('&gt; ul').show('blind');
  });
  $('.collapse_all').click(function() {
    $('#menu3 &gt; li &gt; a.expanded').addClass('collapsed', 'ccollapse').removeClass('expanded', 'cexpand').parent().find('&gt; ul').hide('blind');
  });
  }, 0);
  });
  </code></pre>
  
  <p>*<strong>*EDIT</strong> *<em>close.js</em>***</p>
  
  <pre><code> $(document).ready(function() {
  
  var visible_state = $.cookie('visible_state');
  
   if (visible_state == null){
  $('#menu3 &gt; li &gt; a').addClass('collapsed');
  $('#menu3 &gt; li &gt; a + ul.1').addClass('expanded');
  
   };
  
   if (visible_state == 'collapsed'){
  $('#menu3 &gt; li &gt; a').removeClass('expanded');
  $('#menu3 &gt; li &gt; a').addClass('collapsed');
  
  $.cookie('visible_state', 'collapsed', { path: '/', expires: 100 });
   };
    if (visible_state == 'expanded'){
  $('#menu3 &gt; li &gt; a').addClass('expanded');
  $.cookie('visible_state', 'expanded', { path: '/', expires: 100 });
   };
  
   $('#menu3 &gt; li &gt; a').click(function() {
   if ($('#menu3 &gt; li &gt; a').attr('class')=='expanded'){
  $(this).removeClass('expanded');
  $(this).addClass('collapsed');
  $.cookie('visible_state', 'collapsed', { path: '/', expires: 100 });
  
  } else{
  $(this).removeClass('collapsed');
  $(this).addClass('expanded');
  $.cookie('visible_state', 'expanded', { path: '/', expires: 100 });
  
  }
  });
  
  $('#menu3 &gt; li &gt; a.expanded + ul.1').show('blind');
  $('#menu3 &gt; li &gt; a.expanded + ul.2').show('blind');
  $('#menu3 &gt; li &gt; a.expanded + ul.3').show('blind');
  $('#menu3 &gt; li &gt; a.expanded + ul.4').show('blind');
  $('#menu3 &gt; li &gt; a.expanded + ul.5').show('blind');
  $('#menu3 &gt; li &gt; a.collapsed + ul.1').hide('blind');
  $('#menu3 &gt; li &gt; a.collapsed + ul.2').hide('blind');
  $('#menu3 &gt; li &gt; a.collapsed + ul.3').hide('blind');
  $('#menu3 &gt; li &gt; a.collapsed + ul.4').hide('blind');
  $('#menu3 &gt; li &gt; a.collapsed + ul.5').hide('blind');
  
  $('.expand_all').click(function() {
    $('#menu3 &gt; li &gt;           a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('&gt;   ul').show('blind');
    $.removeCookie('visible_state');
    $.cookie('visible_state', 'expanded', { path: '/', expires: 100 });
  });
  $('.collapse_all').click(function() {
    $('#menu3 &gt; li &gt;   a.expanded').addClass('collapsed').removeClass('expanded').parent().find('&gt; ul').hide('blind');
    $.removeCookie('visible_state');
    $.cookie('visible_state', 'collapsed', { path: '/', expires: 100 });
  });
  });
  </code></pre>
  
  <p>My .html</p>
  
  <pre><code>&lt;div id="leftnav" style="clear:left;"&gt;
  &lt;div id="wrapper"&gt;
    &lt;ul id="menu3" class="leftnavmenu"&gt;
      &lt;li class="leftnavitem1"&gt;&lt;a href="#" class="expanded"&gt;Category 1 &lt;span&gt;1&lt;/span&gt;   &lt;/a&gt;
        &lt;ul&gt;
      &lt;li class="subitem1"&gt;&lt;a href="#"&gt;Link 1 &lt;span&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="subitem2"&gt;&lt;a href="#"&gt;Link 2 &lt;span&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="subitem3"&gt;&lt;a href="#"&gt;Link 3 &lt;span&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul
      &lt;/li&gt;
      &lt;li class="leftnavitem2"&gt;&lt;a href="#" class="expanded"&gt;Category 2 &lt;span&gt;1&lt;/span&gt;&lt;/a&gt;
        &lt;ul&gt;
      &lt;li class="subitem1"&gt;&lt;a href="#"&gt;Link 1 &lt;span&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="subitem2"&gt;&lt;a href="#"&gt;Link 2 &lt;span&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="subitem3"&gt;&lt;a href="#"&gt;Link 3 &lt;span&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
          &lt;li class="leftnavitem3"&gt;&lt;a href="#" class="collapsed"&gt;Category 3 &lt;span&gt;1&lt;/span&gt;&lt;/a&gt;
        &lt;ul&gt;
      &lt;li class="subitem1"&gt;&lt;a href="#"&gt;Link 1 &lt;span&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="subitem2"&gt;&lt;a href="#"&gt;Link 2 &lt;span&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="subitem3"&gt;&lt;a href="#"&gt;Link 3 &lt;span&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="leftnavitem4"&gt;&lt;a href="#" class="collapsed"&gt;Category 4  &lt;span&gt;1&lt;/span&gt;&lt;/a&gt;
        &lt;ul&gt;
          &lt;li class="subitem1"&gt;&lt;a href="#"&gt;Link 1 &lt;span&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="subitem2"&gt;&lt;a href="#"&gt;Link 2 &lt;span&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="subitem3"&gt;&lt;a href="#"&gt;Link 3 &lt;span&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="leftnavitem5"&gt;&lt;a href="#" class="collapsed"&gt;Category 5 &lt;span&gt;1&lt;/span&gt;&lt;/a&gt;
        &lt;ul&gt;
              &lt;li class="subitem1"&gt;&lt;a href="#"&gt;Link 1 &lt;span&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li class="subitem2"&gt;&lt;a href="#"&gt;Link 2 &lt;span&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="subitem3"&gt;&lt;a href="#"&gt;Link 3 &lt;span&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>I will mentally buy a coffee? for anyone who puts an end to my misery.</p>