title: jQuery toggle menu dropdown
body: <p>I am working on a menu navigation that has parent horizontal bar as static 
  and a vertical accordion child menu that interacts with the parent.</p>
  
  <p>I have them working fine except one part where I want to toggle <code>show()</code> and <code>hide()</code> child menu when clicked on the same parent menu item.</p>
  
  <p>I've looked at <code>toggle()</code> jQuery API but couldn't get it working properly.</p>
  
  <p>The following is only a script for <code>parent</code> part which I got rid of <code>toggle()</code> for now.</p>
  
  <pre><code>$(function () {
  
      $('#mainMenu &gt; ul &gt; li &gt; a').click(function () {
          $('#mainMenu li').removeClass('active');
          $(this).closest('li').addClass('active');
          if ($(this).text() == "1st click") {
              $('#subMenu &gt; ul').siblings().hide();
              $('#subMenu &gt; ul:nth-child(1)').show();
          } else if ($(this).text() == "2nd click") {
              $('#subMenu &gt; ul').siblings().hide();
              $('#subMenu &gt; ul:nth-child(2)').show();
          }
      });
  });
  </code></pre>
  
  <p>The Full code that isolates the problem is available <a href="http://jsfiddle.net/sungsoonz/duqQN/" rel="nofollow">here</a></p>