I have the following snippet of code (see below) and want to make the function toggle - what is the best way to go about this??
Thank-you.
<html>
<head>
<title></title>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function()
{
$("#left_pane").css("left","-300px");
$("#middle_pane").css("left","0px");
//toggle the componenet with class msg_body
$(".toggle_right_pane").click(function()
{
$('#left_pane').animate({
left: '0',
}, 500, function() {
// Animation complete.
});
$('#main_pane').animate({
left: '300',
}, 500, function() {
// Animation complete.
});
});
});
</script>
<style>
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;
}
</style>
</head>
<body>
<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>
</html>