JSFiddle - React, Tailwind, and code Playground

by philll_t

HTML

<div id="form_container">
    <div id="form_1_wrapper">I am the login view. Click me to present Create login view</div>
    <div id="form_2_wrapper">And I am the new first step to creating a new login Click me to go back</div>
</div>

CSS

#form_container {
    width: 250px;
    border: solid 2px green;
    margin: 20px auto;
}
#form_1_wrapper, #form_2_wrapper {
    padding: 0px 10px;
    text-align: center;
    line-height: 30px;
    height: 300px;
    cursor: pointer;
}
#form_1_wrapper {
    background-color: rgb(200, 256, 200);
}
#form_2_wrapper {
    background-color: rgb(200, 200, 256);
}

JavaScript

// Settings:
var animation_speed = 400;
var initially_hide_form = true;
// Asign click function to form_1_wrapper.
$("#form_1_wrapper").click(function () {
    animation($("#form_1_wrapper"), $("#form_2_wrapper"), animation_speed)
});
// Asign click function to form_2_wrapper
$("#form_2_wrapper").click(function () {
    animation($("#form_2_wrapper"), $("#form_1_wrapper"), animation_speed);
});
// Dynamically change hight and opacity of initially hidden element.
if (initially_hide_form) $("#form_2_wrapper").css({
    "height": "0px",
    "opacity": 0
});
/** 
 * animation
 * 
 * DRY code animation method.
 **/
function animation(element_to_hide, element_to_show, animation_speed) {
    element_to_hide.animate({
        height: 0,
        opacity: 0
    }, animation_speed);
    element_to_show.animate({
        height: 300,
        opacity: 1
    }, animation_speed);
}