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 { marg

Solution 1:

$('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/

Solution 2:

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.

Solution 3:

You can visit w3school for the solution on this the link is here and there is another example also available that might surely help, Take a look

Solution 4:

The following will work with new versions of jQuery.

$(window).on('load', function(){

    var toggle = false;

    $('button').click(function() {
        toggle = !toggle;

        if(toggle){
            $('#B').animate({left: 0});
        }
        else{
            $('#B').animate({left: 200});
        }

    });
});

Solution 5:

Using Javascript

var side = document.querySelector("#side");
var main = document.querySelector("#main");
var togg = document.querySelector("#toogle");
var width = window.innerWidth;

window.document.addEventListener("click", function() {

  if (side.clientWidth == 0) {
//    alert(side.clientWidth);
    side.style.width      = "200px";
    main.style.marginLeft = "200px";
    main.style.width      = (width - 200) + "px";
    togg.innerHTML        = "Min";
  } else {
//    alert(side.clientWidth);
    side.style.width      = "0";
    main.style.marginLeft = "0";
    main.style.width      = width + "px";    
    togg.innerHTML        = "Max";
  }

}, false);

button {
  width: 100px;
  position: relative; 
  display: block; 
}

div {
  position: absolute;
  left: 0;
  border: 3px solid #73AD21;
  display: inline-block;
  transition: 0.5s; 
}

#side {
  left: 0;
  width: 0px;
  background-color: red;
}
 
#main {
  width: 100%;
  background-color: white;    
}

<button id="toogle">Max</button>
<div id="side">Sidebar</div>
<div id="main">Main</div>

Share