JSFiddle - React, Tailwind, and code Playground

HTML

<div id="exp_outer">
    <div id="exp"></div>
</div>

<div id="tools">
<a href="#" onclick="return animUp()">Expand</a>
|
<a href="#" onclick="return animDn()">Collapse</a>
</div>

CSS

#tools {
    padding: 3px 7px;
    position: absolute;
    top: 5px;
    left: 5px;
}
#exp_outer {
    border: 1px solid #000;
    height: 500px;
}
#exp {
    background-color: #ccc;
    height: 50px;
}

JavaScript

var setHeight = $(this).height();
var newHeight;
function animUp() {
    setHeight;
    alert(setHeight);
    $('#exp').animate({height: $('#exp').parent().height()+'px'}, 'slow');
    return false;
}
function animDn() {
    alert(newHeight);
    $('#exp').animate({height: newHeight+'px'}, 'slow');
    return false;
}