So schalten Sie das Seitenleisten-Div mit jQuery um (ausblenden / anzeigen).

ich habe 2 <div>s mit ids A und B. div A hat eine feste Breite, die als Seitenleiste genommen wird.

Das Layout sieht wie das folgende Diagramm aus:

Das Styling ist wie folgt:

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

Ich habe <a id="toggle">toggle</a> die als Umschalttaste fungiert. Auf den Toggle-Button klicken, die Sidebar kann sich nach links ausblenden und div B sollte sich dehnen, um den leeren Raum zu füllen. Beim zweiten Klick erscheint die Seitenleiste möglicherweise wieder an der vorherigen Position und div B sollte auf die vorherige Breite zurückschrumpfen.

Wie bekomme ich das mit jQuery hin?

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

Überprüfen Sie das Arbeitsbeispiel unter http://jsfiddle.net/hThGb/1/

Sie können auch jede animierte Version unter sehen http://jsfiddle.net/hThGb/2/

Sehen diese Geige für eine Vorschau und überprüfen Sie die Dokumentation für jquerys umschalten und animieren Methoden.

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

Grundsätzlich animieren Sie die Eigenschaften, die das Layout festlegen.

Eine fortgeschrittenere 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});
})

Dies stoppt die vorherige Animation, löscht die Animationswarteschlange und beginnt mit der neuen Animation.

Sie können w3school für die Lösung unter diesem Link besuchen hier und es gibt auch ein weiteres Beispiel, das sicherlich helfen könnte,
Schau mal

Folgendes funktioniert mit neuen Versionen von jQuery.

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

    var toggle = false;

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

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

    });
});

Verwendung von 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>

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

und im CSS:

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

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


<div>
    <a class="trigger" href="#">
        <img id="icon-menu" alt="menu" height="50" src="Images/Push Pin.png" width="50" />
    </a>
</div>
<div id="sidebar">
</div>

Geben Sie stattdessen #sidebar die ID Ihres div an.