Rewriting existing slidetoggle?

Rewriting existing slidetoggle?

Hi,

I´ve got this function, but it didnt worked well for me:
http://jsfiddle.net/DvG6H/21/

How can i rewrite the function, that when I click on a "level_1" "li", the "level_2" nav gets "visablity:visible", the div with the id "nav" gets the height of the child "level_2" ul and slides down. When I click on another "level_1" li, the div "nav" goes up again and the child "level_2" ul gets "visabilty:hidden" again.

I tried it like that, but didnt work:

  1. var $topLevelItems = $("nav > li > a");
    $topLevelItems.click(function(event) {
        if ( !$(event.target).closest('ul').is('.level_1') ) {
            return;
        }
        event.preventDefault();
        if (!$(this).hasClass('selected')) {
            $topLevelItems.removeClass('selected')
                .find('#nav')
                .slideUp('300',function(){
                });

            $(this).addClass('selected')
                .find('#nav').fadeIn('slow')
                .slideDown('100',function(){

                });
        }
    });



















Can you guys help me with that?
Thanks