Hide/Show on left side using jQuery

Question

I want to hide/show a div on click. I want the div to go left to hide when I want it to hide. I have this. But the div goes up to hide. FIDDLE

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

And this is my HTML

 <button id="showmenu" type="button">Show menu</button>
 <div class="sidebarmenu" style="position: absolute; left: -200000px">
     This should go left
 </div>

Answer 1

Use animate() to show that it moves left

Edit:

If you want show the div initially:

Html:

<button id="showmenu" type="button">Hide menu</button>
<div class="sidebarmenu">
     This should go left
</div>

JS:

if(hidden){
        $('.sidebarmenu').animate({
            left: '0px'
        },500)
    } else {
        $('.sidebarmenu').animate({
            left: '-200px'
        },500)

css:

.sidebarmenu{
    position:absolute;
    left: 0px
}
    }

Demo Fiddle