JSFiddle - React, Tailwind, and code Playground

by JAAulde

HTML

<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>
</ul>

CSS

.panel {
    display: none;
}

JavaScript

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