JSFiddle - React, Tailwind, and code Playground

by charlescarver

HTML

<div class="close"></div>
<a class="toggle">Toggle</a>

CSS

.visible{
        opacity: 1 !important;
        -webkit-transition:opacity .5s linear;
        display: block;
    }
    
    .close{
        display: none;
        opacity:0;
        width:20px;
        height:20px;
        background-color:red;   
        -webkit-transition:opacity .5s linear;
    }

JavaScript

$(".toggle").click(function() {
    if ($(".close").css("display") === "none") {
        $(".close").addClass("visible").delay(500).promise().done(function() {
            $(this).css("display", "block");
        });
    };
    if ($(".close").css("display") === "block") {
        $(".close").removeClass("visible").delay(500).promise().done(function() {
            $(this).css("display", "none");
        });
    };
});