Question

I am unfortunately not the best Jquery programmer but I thought I would give this a try to see what i could come up with. It works however I don’t think it is the best way to accomplish what i am after.

HTML MARKUP:

<ul class="top-menu">
<li><a href="#" class="drop">Sign In</a>
    <div id="panel_1" class="panel left">
    CONTENT 1
    </div>
</li>
<li><a href="#" class="drop">Register</a>
    <div id="panel_2" class="panel left">
    CONTENT 2
    </div>
</li>

JQuery Code:

$(document).ready(function () {
        var visId = null;
        $(".top-menu li a.drop").click(function () {

            var parent = $(this).parent();
            var panel = $(parent).find("div.panel");
            if ($(visId) != null && $(visId).is(":visible")) {
                if ($(visId).attr("id") != $(panel).attr("id")) {
                    $(visId).slideUp("fast");
                }
            }

            $(panel).slideDown(function () {
                $(this).slideDown();
                visId = $(this);
            });
        });

    });

Answer 1

I would do it like so:

Code

$( function()
{
    var top_menu = $( 'ul.top-menu' ),
        panels = top_menu.find( 'div.panel' );

    top_menu.find( 'a.drop' ).click( function( e )
    {
        var target_panel = $( this ).parent().find( 'div.panel:hidden' );

        if( target_panel.length )
        {
            panels.filter( ':visible' ).slideUp( 'fast' );
            target_panel.slideDown();
        }

        e.preventDefault();
    } );
} );

Live Demo:

http://jsfiddle.net/JAAulde/8HZzh/