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>
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
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments