How to toggle (hide / show) sidebar div using jQuery

How to toggle (hide / show) sidebar div using jQuery

I have 2

s with ids A and B. div A has a fixed width, which is taken as a sidebar.

The layout looks like diagram below;

The styling is like below;

html, body {      margin: 0;      padding: 0;      border: 0;  }  #A, #B {      position: absolute;  }  #A {      top: 0px;      width: 200px;      bottom: 0px;  }  #B {      top: 0px;      left: 200px;      right: 0;      bottom: 0px;  }  

I have toggle which acts as a toggle button. On the toggle button click, the sidebar may hide to the left and div B should stretch to fill the empty space. On second click, the sidebar may reappear to the previous position and div B should shrink back to the previous width.

How can I get this done using jQuery?

Answer by Kristoffer Sall-Storgaard for How to toggle (hide / show) sidebar div using jQuery

See this fiddle for a preview and check the documentation for jquerys toggle and animate methods.

$('#toggle').toggle(function(){      $('#A').animate({width:0});      $('#B').animate({left:0});  },function(){      $('#A').animate({width:200});      $('#B').animate({left:200});  });  

Basically you animate on the properties that sets the layout.

A more advanced version:

$('#toggle').toggle(function(){      $('#A').stop(true).animate({width:0});      $('#B').stop(true).animate({left:0});  },function(){      $('#A').stop(true).animate({width:200});      $('#B').stop(true).animate({left:200});  })  

This stops the previous animation, clears animation queue and begins the new animation.

Answer by EMMERICH for How to toggle (hide / show) sidebar div using jQuery

$('#toggle').click(function() {    $('#B').toggleClass('extended-panel');    $('#A').toggle(/** specify a time here for an animation */);  });  

and in the CSS:

.extended-panel {    left: 0px !important;  }  

Answer by Hussein for How to toggle (hide / show) sidebar div using jQuery

$('button').toggle(  function() {      $('#B').css('left', '0')  }, function() {      $('#B').css('left', '200px')  })  

Check working example at http://jsfiddle.net/hThGb/1/

You can also see any animated version at http://jsfiddle.net/hThGb/2/

Answer by S. Mayol for How to toggle (hide / show) sidebar div using jQuery

This help to hide and show the sidebar, and the content take place of the empty space left by the sidebar.

Sidebar
  
  Content here: Bla, bla, bla  
      //Toggle Hide/Show sidebar slowy    $(document).ready(function(){        $('#B').click(function(e) {            e.preventDefault();            $('#A').toggle('slow');            $('#B').toggleClass('extended-panel');         });    });       html, body {      margin: 0;      padding: 0;      border: 0;  }  #A, #B {      position: absolute;  }  #A {      top: 0px;      width: 200px;      bottom: 0px;      background:orange;  }  #B {      top: 0px;      left: 200px;      right: 0;      bottom: 0px;      background:green;  }    /* makes the content take place of the SIDEBAR      which is empty when is hided */  .extended-panel {    left: 0px !important;  }  

Answer by Jafar Ali for How to toggle (hide / show) sidebar div using jQuery

$(document).ready(function () {      $(".trigger").click(function () {          $("#sidebar").toggle("fast");          $("#sidebar").toggleClass("active");          return false;      });  });      
                        
  
  
  

Instead #sidebar give the id of ur div.

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72