JSFiddle - React, Tailwind, and code Playground

HTML

<button>Animate</button>
<div class="otherDiv"></div>
<div class="wrap">
        <div class="inner">
            I'm just a regular old div...ughhh
        </div>
</div>
<div class="otherDiv"></div>
<ul>
    <li class="wrap"><div class="inner">I'm a list Element!!!</div></li>
</ul>
<div class="otherDiv"></div>

CSS

/* Function CSS */

    .wrap {	overflow:hidden; }

    .inner {	                   
	         margin-top:-100%;
	    -webkit-transition:margin-top 500ms;
                transition:margin-top 500ms;
    }

    .inner.open { margin-top:0px; }

    /* Styles for Demonstration */

.wrap {
    background-color:orange;
}

.inner {color:white; padding:20px;}

.otherDiv {
    padding:10px;
    background-color:blue;
    color:white;
}
}

JavaScript

$('button').bind('click', function(e) { 
    e.preventDefault();
    $('.inner').toggleClass('open');
});