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

javascript jquery css jquery-events
Alfred picture Alfred · Apr 7, 2011 · Viewed 101.7k times · Source

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:

Layout

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

Hussein picture Hussein · Apr 7, 2011 
$('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/

Related questions

jQuery event that triggers after CSS is loaded?

I have a couple of links on my page (inside a <div id="theme-selector">) which allow you to change the CSS stylesheets: $('#theme-selector a').click(function(){ var path = $(this).attr('href'); $('head link').remove(); $('head').append('&…

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More
How can I remove a style added with .css() function?

I'm changing CSS with jQuery and I wish to remove the styling I'm adding based on the input value: if(color != '000000') $("body").css("background-color", color); else // remove style ? How can I do this? Note that the line above …

Read More