title: Jquery - dropdown menu on click
body: <p>I am relatively new to jquery and I am seeking help. The aim is to click on a list item attached to a ul and have it appear whilst any other list items disappear. Only the active one is viewable </p>
  
  <p>The Issue I am having is that when I click on another list item the active one disappears (as intended), but it doesn't reveal the other one, it remains hidden. I am looking for a way to reveal the list, while hiding the ones that are in-active. </p>
  
  <p>I have uploaded my problem: <a href="http://jsfiddle.net/CbU4d/" rel="nofollow">http://jsfiddle.net/CbU4d/</a> </p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="secondary-nav"&gt;&lt;!--secondary-nav--&gt;    
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#.html"&gt;Current Article&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#.html"&gt;Example 1&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="active"&gt;&lt;a href="#.html"&gt;Past Articles&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#.html"&gt;Example 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#.html"&gt;Example 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#.html"&gt;Example 3&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;   
  &lt;/div&gt;&lt;!--/secondary-nav--&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>#secondary-nav {
      float:left;
      height:auto;
      width:23%; /*210px*/
      border-right:2px solid #000;
      position:relative;
  }
  
  /*heading styles*/
  #secondary-nav ul li {
      padding: 0 10px;
      list-style-type: none;
  }
  
  #secondary-nav ul li a {
      font-family:TrajanPro;
      font-size:1em;
      line-height: 32px;
      color:#000;
  }
  
  /*links*/
  #secondary-nav ul ul li a {
      display: block;
      font-family:TrajanPro;
      font-size:0.9em;
      line-height: 27px;
      text-decoration: none;
      color:#000;
      transition: all 0.15s;
  }
  
  #secondary-nav ul li a:hover {
      display:block;
      color:#af2931;
      text-decoration:underline;
  }
  
  #secondary-nav ul ul {
      display: none;
  }
  
  #secondary-nav li.active ul {
      display: block;
  }
  /css
  </code></pre>
  
  <p>jquery using 1.7.1 </p>
  
  <pre><code>$(document).ready(function(){
      $("#secondary-nav ul").click(function(){
          //slide up all the link lists
          $("#secondary-nav ul ul").slideUp();
          //slide down the link list below the h3 clicked - only if its closed
          if(!$(this).next().is(":visible"))
          {
              $(this).next().slideDown();
          }
      })
  })
  </code></pre>