JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu">
    <button id="snapshot">Snapshoty</button>
</div>
<div id="snapshots">Snap Shot
    <br/>Snap Shot
    <br/>Snap Shot
    <br/>Snap Shot
    <br/>Snap Shot
    <br/>Snap Shot
    <br/>Snap Shot
    <br/>Snap Shot
    <br/>Snap Shot
    <br/>Snap Shot
    <br/>Snap Shot
    <br/>Snap Shot
    <br/>
</div>

CSS

#snapshots {
    border:1px solid red;
    position:absolute;
    top:-100%;
    display: none;
    left:150px;
    height:250px;
}

JavaScript

$('#snapshot').click(function()
{
    if( $('#snapshots').css('display') == "none" || $('#snapshots').css('top') == "100px" ) 
    {
        if ( $('#snapshots').css('display') == "none" )
        {
            $('#snapshots').show().animate({top: '100px'},2000);     
        }
        else
          $('#snapshots').animate({top: '-100%'},2000, function(){
             $('#snapshots').hide();
          });
    }
});