JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container" style='height:250px;'><div id="content">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div></div>
<script language="JavaScript" type="text/javascript">
<!--

function sizeTbl(h) {

var tbl = document.getElementById('container');
tbl.style.display = h;
if(h=="block")
{
document.getElementById('down').style.display='none';
document.getElementById('up').style.display='block';
}
else
{
document.getElementById('up').style.display='none';
document.getElementById('down').style.display='block';

}
}
// -->
</script> 
<a href="javascript:sizeTbl('none')"  id="up"><img src="up_arrow.png"></a> 

<a href="javascript:sizeTbl('block')" style='display:none;' id="down"><img src="down_arrow.png"></a>

CSS

#container {
    width: 500px;
    height: 0;
    max-height: 9999px;
    overflow: hidden;
    background: #BBBBBB;
    -webkit-transition: height 1s ease-in-out;
}

#click-me {
    cursor: pointer;   
}