JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.tutorialspoint.com/jquery/jquery-ui-1.7.2.custom.min.js"></script>
<a href="#" class="left_arrow">Click me</a>

<div class="showmenu">

    <input type="text" value="One" />
    <input type="text" value="Two" />
    <input type="text" value="Three" />
    <input type="text" value="Four" />
    
    <div class="menuViewArea">
        <ul>
            <li>Number</li>
            <li>Number</li>
            <li>Number</li>
            <li>Number</li>
        </ul>
    </div>
    
</div>

CSS

.showmenu input { width:80%; }

JavaScript

$(document).ready(function(){
    $(".showmenu").hide();
    $(".left_arrow").show();
    
    $(".menuViewArea").hide();
    
    $(".left_arrow").click(function(){
        $(".showmenu").toggle( "slide", {direction: "left"}, 1000 ,function() {
        $(".menuViewArea").delay(1200).show( "blind", {direction: "vertical"}, 1000 );
            //$(".menuViewArea").css('visibility','visible').hide( "slide", {direction: "left"}, 1000 );
        });
        
    });
});