JSFiddle - React, Tailwind, and code Playground

HTML

<div id="newResFormWrap">
    <form id="newResForm" action="" method="post" name="newRes">
        <div id="newResFormCont">
            <h3>title</h3>
            <p>form!</p>
            <div class="button" id="cancelNewRes">Cancel</div>
        </div>
    </form> 
</div>
<div class="button" id="addRes">show</div>

CSS

#newResFormWrap {
    background-color:#aa0000;
    display:none;
}
#newResForm {
    background-color:#00aa00;
}
.button {
    background-color:#aaaaaa;
    cursor:pointer;
}
}

JavaScript

$("#newResForm").css({opacity: 0});

$("#addRes").click(function () {
    toggleNewRes()
});
$("#cancelNewRes").click(function () {
    toggleNewRes()
});

//toggleNewRes
function toggleNewRes() {
    if ($("#newResFormWrap").css('display') == "none") {//if hidden 
        $("#addRes").animate({ opacity: 0 }, 'fast', function() {
            $("#newResFormWrap").toggle(0, function (){
                $("#newResForm").animate({ opacity: 100 },400);
            });
        });
    } else { //if visible
        console.log('click');
        $("#newResForm").animate({ opacity: 0 }, 0, function() {
            console.log('animated');
            $("#newResFormWrap").toggle(0)
        });
        $("#addRes").animate({ opacity: 100 }, 'fast');
    }
}