title: jQuery and selecting the next list items objects
body: <p>I have a nav built with a list and sub nav as lists inside a parent list. The sub nav resides in the next list item to it's corresponding main nav link:</p>
  
  <p>This sits in a div with an id of 'nav'</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Nav main 1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;
      &lt;ul&gt;
          &lt;li&gt;sub 1&lt;/li&gt;
          &lt;li&gt;sub 2&lt;/li&gt;
          &lt;li&gt;sub 3&lt;/li&gt;
          &lt;li&gt;sub 4&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Nav main 2&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;
      &lt;ul&gt;
          &lt;li&gt;sub 1&lt;/li&gt;
          &lt;li&gt;sub 2&lt;/li&gt;
          &lt;li&gt;sub 3&lt;/li&gt;
          &lt;li&gt;sub 4&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Currently I have the following jquery:</p>
  
  <pre><code>$(document).ready(function() {
  $("#nav ul li a[href^='#']").each(function(){ 
      if ($(this).next().is(':visible')) {
              $(this).next().hide();
   } else {
  $("#nav ul li a[href^='#']").each(function(){ 
  $(this).next().hide();
   });
  
  $(this).next().show();
  }
  });
  </code></pre>
  
  <p>I thought this would work to make all the sub menu's hide and then show the one that had been clicked on. For some reason nothing happens. I have checked the console (firebug) and there is no error shown.</p>
  
  <p>Getting frustrated with it now! :-/</p>
  
  <p><strong>EDIT: Here is the answer:</strong></p>
  
  <pre><code>$(document).ready(function() {
  $("#nav ul li a[href^='#']").each(function(){ 
  $(this).parent().next().hide();
    $(this).click(function() {
  
          if ($(this).parent().next().is(':visible')) {
              $(this).parent().next().hide();
  
          } else {
              $("#nav ul li a[href^='#']").each(function(){ 
              $(this).parent().next().hide();
  
           });
          //then reshow and label the clicked nav
          $(this).parent().next().show();
          }
  
      });
      });
  
  });
  </code></pre>