JSFiddle - React, Tailwind, and code Playground

by MrDJK

HTML

<div id="panel">
    <form>
        <p>
            <input type="text" />
        </p>
        <p>
            <input type="text" />
        </p>
        <p>
            <input type="text" />
        </p>
        <input type="submit" value="Submit" id="submitButton" />
    </form>
    <button id="showPanel">Show</button>
</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);
        form.hide();

        $('#showPanel').on('click', function (e) {
            //Do some slide stuff.
            $(this).remove(); //Remove button.
            panel.addClass('expanded');
            form.show();
        });

        //Need to access the 'submit button' click event?
        $('#submitButton').on('click', function (e) {
            e.preventDefault();

            //Check something.

            alert('Checked');
            form.submit();
            //Or ajax or however.
        });
    });
})(jQuery);