Jquery - dropdown menu on click

Question

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

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.

I have uploaded my problem: http://jsfiddle.net/CbU4d/

html:

<div id="secondary-nav"><!--secondary-nav-->    
    <ul>
        <li><a href="#.html">Current Article</a>
            <ul>
                <li><a href="#.html">Example 1</a></li>
            </ul>
        </li>
        <li class="active"><a href="#.html">Past Articles</a>
            <ul>
                <li><a href="#.html">Example 1</a></li>
                <li><a href="#.html">Example 2</a></li>
                <li><a href="#.html">Example 3</a></li>
            </ul>
        </li>
    </ul>   
</div><!--/secondary-nav-->

css:

#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

jquery using 1.7.1

$(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();
        }
    })
})

Answer 1

Try with

$("#secondary-nav ul ul").slideToggle();

Demo

Answer 2

I got it to work (I think) by making two changes:

1. Change the selector on line 2 to this:

   "#secondary-nav ul li"
   

   This means the event will be attached to the list item you click, not the entire list.

2. Remove the if statement on line 6. Since we're hiding all of the second level uls in the previous line, we don't need to check if it's visible; we know it isn't.

3. Change line 6 to this:

   $(this).children('ul').slideDown();
   

   This is because the ul you want to unfold is a child of the li you're clicking, not a sibling.

Here's my fixed jsFiddle.

Edit: If you want to stop it from hiding and re-showing when you click the one that's already expanded, just chuck this at the top of the handler:

if ($(this).children('ul').is(':visible')){
    return
}