Question

I have two div columns sidebar(left) and page-content(right). I toggle removing and adding ‘sidebar’ using jquery but unable to maximize ‘#page-content’ to take up the empty space when sidebar is removed.I tried removing ‘margin-left:250px;’ but the #page-content is going to the bottom.
In short i want

Toggle before

| sidebar | page-content |

Toggle after

| page-content                |

but it happens like

| sidebar |
| page-content                |

Please help. Here is the css and jquery used. Thanx

css

#sidebar {
    float:left;
    width:185px;
    color:#333;
    padding:25px 25px;
}

#page-content {
    margin-left:250px;
    padding:25px 35px 25px 25px;
    color:#333;
}

jQuery

$(document).ready(function() {
$('a#side-toggle').click(function() {
  $('#sidebar').toggle(400);

 return false;
  });
});

Answer 1

Well, it should work actually.

Try to add a callback function to .toggle() where you animate/remove the margin from your content, like:

$(document).ready(function() {
  $('a#side-toggle').click(function() {
    $('#sidebar').toggle(400, function(){
        $('.page-content').animate({marginLeft: '0'}, 1000);
    });

    return false;
 });
});

working example: http://jsbin.com/eqiyu/edit

updated version from Reigel: [jsbin.com/eqiyu/2][2]

[2]: http:// jsbin.com/eqiyu/2