JSFiddle - React, Tailwind, and code Playground

HTML

<a class="toggleclass" href="#">Toggle Div</a>

<a class="animate" href="#">Animate Div</a>

<div class="parent">
    <div class="longer">&nbsp;</div>
</div>

CSS

div.parent {
    background: #ddd;
    box-shadow: 1px 1px 2px 1px #c9c7c9;
    width: 80%;
}

div div {
    background: red;
    height: 10px;
    width: 30px;
}

.longer {
    height: 200px;
}

JavaScript

var div = $("div div");
$("a.toggleclass").on("click", function() {
    div.stop(true,true).toggleClass("longer", 1000);
});

$("a.animate").on("click", function() {
    div.stop(true,true).animate({"height":"20px"}, function() {
        div.attr({"style":""});
    });
});