Question

162

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

rated 0 times [ 164] [ 2] / answers: 1 / hits: 109384 / 13 Years ago, thu, april 7, 2011, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

nathanaelzechariahl

Add To Favorites

Follow

Total Points: 745

Total Questions: 86

Total Answers: 103

Location: Finland

Member since Fri, Oct 21, 2022

2 Years ago

answered 13 Years ago tayaw · Accepted Answer

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