title: why are my jquery cookies not available across multiple pages?
body: <p>This week I have researched and put together some jquery (it's my first time working with jquery) to control a collapsible menu in a custom WordPress sidebar.php file. The menu is dynamically generated, using wp_query to select and sort custom post types by custom taxonomies and custom sort orders, etc. (so there is no plugin solution).</p>
  <p>I want to maintain the expand/collapse state of my menu sections as site visitors navigate the content. Using jquery it appears I am successfully writing unique cookie names to the browser, and it appears I am successfully passing the &quot;expanded&quot; or &quot;collapsed&quot; class values of my  tags.</p>
  <p>However, the cookies don't work across multiple pages - if you navigate to another page, no new cookies are set until you click a menu item. If you hit the back browser and return to the previous page, your cookies set on the previous page <strong>are</strong> still set (which is good). Note that when navigating to a new page the menu DOES get regenerated, but the menu content rarely changes (so IDs are stable) and the cookies are only for the current session (and should still be held over from the previous page(s)).</p>
  <p>I've experimented with setting PHP cookies, and they hold up nicely from page to page. But my jquery cookies seem to be page-specific, so I'm doing something wrong.</p>
  <p>Here's the jquery code that appears in my PHP page to control the menu and write my cookies (NOTE: I <strong>am</strong> linking to the jquery.cookie.js plugin):</p>
  <pre><code>        &lt;script type=&quot;text/javascript&quot;&gt;
          $(document).ready(function() {
              setTimeout(function() {
                  $('#port-menu &gt; li &gt; a.expanded + ul, #port-menu &gt; li ul li &gt; a.collapsed + ul').slideToggle('medium');
                  $('#port-menu &gt; li &gt; a').click(function() {
                      $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('&gt; ul').slideToggle('medium');
                      var vartag = $(this).get(0).tagName.toLowerCase();
                      var varclass = $(this).attr('class');
                      var cookiename = $(this).parent().attr('id');
                      $.cookie(cookiename, $(this).attr('class'));
                  });
                  $('#port-menu &gt; li ul li &gt; a').click(function() {
                      $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('&gt; ul').slideToggle('medium');
                      var vartag = $(this).get(0).tagName.toLowerCase();
                      var varclass = $(this).attr('class');
                      var vargenre = $(this).parent().parent().parent().attr('id');
                      var varoutlet = $(this).parent().attr('id');
                      var cookiename = vargenre + varoutlet;
                      $.cookie(cookiename, $(this).attr('class'));
                  });
              }, 250);
          });
      &lt;/script&gt;
  </code></pre>
  <p>As an example, the dynamically created cookie names and values look something like this:</p>
  <blockquote>
  <p>genre2 : collapsed</p>
  <p>genre3 : expanded</p>
  <p>genre1outlet2 : expanded</p>
  <p>genre2outlet3 : expanded</p>
  <p>genre2outlet4 : expanded</p>
  </blockquote>
  <p>As mentioned above, I'm new to jquery. I'm also new to using cookies. Any help would be greatly appreciated.</p>
  <p>P.S. Once I get this working, I have no idea how to get the info from my array of cookies and apply the classes to my menu - but that's a separate issue.</p>