JSFiddle - React, Tailwind, and code Playground

by MrDJK

HTML

<div id="panel">
    <form method="post"><!-- for error message, rather than reload-->
        <p><input type="text" /></p>
        <p><input type="text" /></p>
        <p><input type="text" /></p>
        <input type="submit" value="Show" id="submitButton" />
    </form>
</div>

CSS

#panel {
    height:80px;
    background: #000;
}
#panel.expanded {
    height:150px;
}
#submitButton, #showPanel {
    display: block;
    border:none;
    background: #fff;
    margin-top:10px;
    padding: 10px;
    margin-left:10px;
}

JavaScript

( function ( $ ) {
    $( function () {
        var panel = $('#panel'),
            form = $('form', panel);
        
        //$('input', form).not('#submitButton').hide();
        $('p', form).hide();
        
        $('#submitButton').one( 'click', function ( e ) {
            e.preventDefault();
            $(this).val('Login');
            //$('input', form).show();
            $('p', form).show();
            panel.addClass('expanded'); //Just for fiddle replace with your own.
            
        });
    });
})(jQuery);