More efficient collapsable list targeting

I'm trying to figure out if there's a way to use jquery's slideDown/slideUp/slideToggle functions to animate these collapsable elements when I click on them. Here's a snippet of the html layout of the elements:

<ul> 
                    <li class="category1"><a href="#"></a></li>
                        <ul>
                            <div class="tag1">
                                <li class="cat2"><a href="#">derp</a></li>
                                <li class="cat2"><a href="#">derp</a></li>
                                <li class="cat2"><a href="#">derp</a></li>
                            </div>

                        </ul>
                    <li class="category2"><a href="#"></a></li>
                        <ul>
                            <div class="tag2">
                                <li class="cat2"><a href="#">derp</a></li>
                                <li class="cat2"><a href="#">derp</a></li>
                                <li class="cat2"><a href="#">derp</a></li>
                            </div>  
                        </ul>
                    <li class="category3"><a href="#"></a></li>
                        <ul>
                            <div class="tag3">
                                <li class="cat2"><a href="#">derp</a></li>
                                <li class="cat2"><a href="#">derp</a></li>
                                <li class="cat2"><a href="#">derp</a></li>
                            </div>  
                        </ul>

</ul>

Here's the javascript code that I've tried. It works, but it is very long. I am wondering if there is a more efficient way to accomplish the same thing.

$('.category1').click(function(){
    $('.tag1').slideToggle('200');
    $('.tag2').slideUp('200');
    $('.tag3').slideUp('200');
        return false;
});

$('.category2').click(function(){
    $('.tag1').slideUp('200');
    $('.tag2').slideToggle('200');
    $('.tag3').slideUp('200');
        return false;
});

$('.category3').click(function(){
    $('.tag1').slideUp('200');
    $('.tag2').slideUp('200');
    $('.tag3').slideToggle('200');
        return false;
});

Solution

Well I am pretty sure your markup is invalid as only li elements should be nested in ul elements (someone correct me if I am wrong). I changed the markup to this:

<ul class="outer"> 
    <li>
        <a href="#"></a>
        <ul>
            <li class="cat1"><a href="#">derp</a></li>
            <li class="cat1"><a href="#">derp</a></li>
            <li class="cat1"><a href="#">derp</a></li>    
        </ul>
    </li>
    <li>
        <a href="#"></a>
        <ul>
            <li class="cat2"><a href="#">derp</a></li>
            <li class="cat2"><a href="#">derp</a></li>
            <li class="cat2"><a href="#">derp</a></li>    
        </ul>
    </li>
    <li>
        <a href="#"></a>
        <ul>
            <li class="cat3"><a href="#">derp</a></li>
            <li class="cat3"><a href="#">derp</a></li>
            <li class="cat4"><a href="#">derp</a></li>    
        </ul>
    </li>
</ul>

Here is the script:

$(".outer > li > a").on("click", function(event) {
    event.preventDefault();
    $(".outer ul").slideUp();   
    var next = $(this).next();
    if(next.is(":visible")) { return; }         
    next.slideDown();
});

And here is the working example.

As you can see, I simply slide up all the ul sections and then slide down the next one after the anchor which has been clicked.