JSFiddle - React, Tailwind, and code Playground

HTML

<a href="" id="goslidedown">DOWN</a>
    |
    <a href="" id="goslideup">UP</a>
<div>
    <div id="slidingblock">Top</div>
    <div>Bottom</div> 
</div>

CSS

p, div {
    margin: 100px 0;
    -webkit-margin-collapse: separate;
}

JavaScript

$("#goslidedown").click(function(event) {

    $("#slidingblock").slideDown("slow");
    event.preventDefault();

});

$("#goslideup").click(function(event) {

    $("#slidingblock").slideUp("slow");
    event.preventDefault();

});