JSFiddle - React, Tailwind, and code Playground

HTML

<button id="btnLogin" data-bound="login">Login</button><button id="btnRegister" data-bound="register">Register</button>

<hr />

<div id="login" class="area" data-state="closed">
    Login div
</div>

<div id="register" class="area" data-state="closed">
    Register div
</div>

CSS

.area{
    float:left;
    width:200px;
    height:0;
    margin:10px;
    overflow:hidden;
    text-align:center;
    line-height:100px;
}
#login{
    background:#41cc36;
}
#register{
    background:#3764e3;
}

JavaScript

$(document).ready(function(){
    $('button').bind('click', function(){
        //close any open areas
        $('.area').each(function(){
            if($(this).data('state') == 'open'){
                $(this).animate({'height': 0}, 750, function(){
                    $(this).data('state', 'closed');
                });
            }
        });
        //retrieve the div we need to toggle and it's state
        var divID = $(this).data('bound'),
            div = $('#' + divID),
            state = div.data('state');
        //animate the div based on it's state, then set the new state
        if(state == 'closed'){
            div.animate({'height': 100}, 750, function(){
                div.data('state', 'open');
            });            
        }else{
            div.animate({'height': 0}, 750, function(){
                div.data('state', 'closed');
            });
        }
    });
});