• Home
• Snippets
• JQuery Toggle Button

JQuery Toggle Button

jQuery

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