JQuery Toggle Button
jQuery
Button that toggles UI animation
Code
$(function() {
$("#left_pane").css("left","-300px");
$("#middle_pane").css("left","0px");
$(".toggle_right_pane").toggle(function() {
$('#left_pane').animate({ left: '0' }, 500);
$('#main_pane').animate({ left: '300' }, 500);
}, function() {
$('#left_pane').animate({ left: '-300' }, 500);
$('#main_pane').animate({ left: '0' }, 500);
});
});
<div id="container">
<div id="left_pane">
menu
</div>
<div id="main_pane">
<a class="toggle_right_pane" href="#">show/hide</a>
</div>
</div>
body{
margin: 0;
}
#left_pane{
float:left;
display:block;
width: 300px;
height: 100%;
overflow:hidden;
background: grey;
position:absolute;
z-index:1
}
#main_pane{
float:left;
height:100%;
left:0px;
overflow:scroll;
position:absolute;
background: red;
right:0;
}