SO jQuery Fiddle

Test Fiddle mainly for SO Questions jQuery 1.4.3, UI 1.8.5

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/ui-lightness/jquery-ui.css">
    <div id="container">

        <div id="left_pane">
        menu
        </div>


        <div id="main_pane">
            <a class="toggle_right_pane" href="#">show/hide</a>
        </div>

    </div>

CSS

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

JavaScript

$(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);
  });
});