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