JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <div id="pageNav"  style="z-index:9999; position:relative;height:180px;">
	   <button id="showmenu" type="button">Hide menu</button>
		<div class="sidebarmenu" style="position: absolute;">
            Menu List
            <img class="image" src="http://www.glamquotes.com/wp-content/uploads/2011/11/smile.jpg">
        </div>
    </div>
  </div>

CSS

#showmenu {
    background: #d2d2d2;
    border-radius: 35px;
    border: none;
	height:30px;
	width:140px;
	font-weight:bold;
	position:relative;
	left:10px;
	top:10px;
	margin-bottom:15px;
}
#content{
    background:yellow;
    height:300px;
    width:300px;
    margin-left:30px;
}
.image{
    height:90px;
    width:90px;
}
.sidebarmenu{
    background:pink;
    height:150px;
    width:150px;
    text-color:white;
}

JavaScript

$(document).ready(function() {
    $('#showmenu').click(function() {
    var hidden = $('.sidebarmenu').data('hidden');
    $('#showmenu').text(hidden ? 'Hide Menu' : 'Show Menu');
    if(hidden){
        $('.sidebarmenu,.image').animate({
            left: '0px'
        },500)
    } else {
        $('.sidebarmenu,.image').animate({
            left: '-210px'
        },500)
    }
    $('.sidebarmenu,.image').data("hidden", !hidden);

    });
});