Hide / show on the left side using jQuery

Question

I want to hide / show div on click. I want the div to go left to hide when I want it to hide. I have it. But the grandfather is hiding. 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 is moving to the left.

Edit:

If you want to show the div first:

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 } } 

Fiddle Demo

Answer 2

The problem is that when using the css property, the action will be immediate. If you want it to “animate” itself (and therefore see movement on the left), you should use the animate function with the same set of CSS properties.

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

Answer 3

In the script, you enabled the jQuery user interface, in this case you can use toggle anti-aliasing jQuery UI without losing graffiti, using negative left, but using only display block-none.

Updated using display state in the hidden attribute.

the code:

 $(document).ready(function() { $('#showmenu').click(function() { var hidden = $('.sidebarmenu').is(':visible'); $('#showmenu').text(hidden ? 'Show Menu' : 'Hide Menu'); $(".sidebarmenu").toggle("slide", {direction:'left'}); }); }); 

Demo: http://jsfiddle.net/W5Wmw/1/