JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content_container"><div id="content" class="targetDiv">Content</div></div>
<div class="buttons">
    <a  class="show" target="content">Show</a>
    <a  class="hide" target="content" style="float: right;">Hide</a>
</div>

CSS

.buttons {
    width: 300px;
    height: 20px;
    margin: 20px 20px 20px 20px;
    padding: 20px;
    background: #cccccc;
}

#content_container {
    display:none;
}

#content {
    display:none;
    width: 300px;
    height: 20px;
    margin: 20px 20px 0px 20px;
    padding: 20px;
    background: #ff0000;
}

JavaScript

$('.show').click(function () {
    var target        = $('#' + $(this).attr('target'));
    var target_parent = target.parent().height(target.outerHeight());
    target_parent.slideDown(250, function() { target.fadeIn(500); });
});

$('.hide').click(function () {
    var target        = $('#' + $(this).attr('target'));
    var target_parent = target.parent();
    target.fadeOut(500, function() {target_parent.slideUp(500);} );
});