JSFiddle - React, Tailwind, and code Playground

HTML

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

CSS

div {
    overflow: hidden;
    background: green;
    height: 20px;
    cursor: pointer;
}

.hideMe {
    -webkit-animation: hideThat 1s forwards;
    animation: hideThat 1s forwards;
}
.showMe {
    -webkit-animation: showThat 1s forwards ;
    animation: showThat 1s forwards;
    
}
@-webkit-keyframes hideThat {
    0% { height: inherit; visibility: visible; }
    99% { height: 0; visibility: visible; }
    100% { height: 0; visibility: hidden;}
}

@keyframes hideThat {
    0% { height: inherit; visibility: visible; }
    99% { height: 0; visibility: visible; }
    100% { height: 0; visibility: hidden;}
}

@-webkit-keyframes showThat {
    0% { height: 0; visibility: hidden;}
    1% { height: 0; visibility: visible; }
    100% { height: inherit; visibility: visible; }
}

@keyframes showThat {
    0% { height: 0; visibility: hidden;}
    1% { height: 0; visibility: visible; }
    100% { height: inherit; visibility: visible; }
}

JavaScript

$("div").on("click", function() {
    $(".hideMe").removeClass("hideMe")
    .addClass("showMe");
    $(this).removeClass("showMe")
    .addClass("hideMe");
});