JSFiddle - React, Tailwind, and code Playground

HTML

<button id="show" onclick="this.style.visibility = 'hidden';">Show</button>
<div><input type="text" size="20"/></div>
<div><input type="text" size="20"/></div>
<div><button id="submit">Submit</button> <button id="cancel">Cancel</button></div>

CSS

div {margin:3px; width:130px; height:30px; display:none;}

JavaScript

$(document.body).click(function () {
    if ($("div:first").is(":hidden")) {
        $("div").slideDown("medium");
    } else {
        $("div").hide();
    }
}); 

// Sliding Submit Menu UP [Not Working]
$(document.body).click(function () {
    if ($("cancel").is(":hidden")) {
        $("div").slideUp("slow");
    } else {
        $("cancel").show();
    }
});

// Second Version
/*
$("cancel").click(function () {
    $(this).parent().slideUp("slow", function () {
        $("#msg").text($("cancel", this).text() + " has completed.");
    });
});
//*/