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

Question

I have 2 <div>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 <a id="toggle">toggle</a> 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 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/