Set Content's Width to 100% when Sidebar is Hidden?

问题

Beforehand, pardon me for my poor English.

Ok so here's a live site I have: http://bleachindonesia.com/forum/

If you notice the little X on the left, it is a toggle to show/hide sidebar. The jQuery is working fine. The only problem is that the content's width won't get wider (to 100%) / won't fill the empty space when I hide the sidebar (the sidebar left an empty space when hidden).

I need the content's width to be 100% when the sidebar is hidden, but retaining its smooth animation. Perhaps like the one in the vBulletin forum.

Here is the jQuery btw:

//<!--
if($.cookie("sidebarpost") == undefined) {
    $.cookie("sidebarpost", "expanded");
}
var state = $.cookie("sidebarpost");
if(state == "collapsed") {
    $('.lside').hide();
            $('.lclose').hide();
            $('.lopen').show();
}

if($.cookie("sidebarpost") == "expanded") {
    $("#left-side").toggle(function(){
      $.cookie("sidebarpost", "collapsed");
      $('.lopen,.lclose').toggle();
      $('.lside').fadeOut().delay(1000);
      $('#content').hide("slide", { direction: "left" }, 2000);
    },function(){
      $.cookie("sidebarpost", "expanded");
      $('.lopen,.lclose').toggle();
      $('#content').show("slide", { direction: "right" }, 2000).delay(1000);
      $('.lside').fadeIn();
    });
} else {
    $("#left-side").toggle(function(){
      $.cookie("sidebarpost", "expanded");
      $('.lopen,.lclose').toggle();
      $('#content').show("slide", { direction: "right" }, 2000).delay(1000);
      $('.lside').fadeIn();
    },function(){
      $.cookie("sidebarpost", "collapsed");
      $('.lopen,.lclose').toggle();
      $('.lside').fadeOut().delay(1000);
      $('#content').hide("slide", { direction: "left" }, 2000);
    });
}
//-->

I know it's kind of bloated, perhaps if there is a way to minimize it, would be very helpful. Can anybody help?

回答1:

You could just adjust the content width as part of your toggle functions. Something like:

$('.lside').fadeOut(400, function(){$('#content').width("98%")});

$('.lside').fadeIn(400, function(){$('#content').width("76%")});

回答2:

In the example what you have given they are doing margin-right:290px for the content area while showing sidebar and width of sidebar as 270px, and while hiding they are making margin-right:0px; and width as 0px;

use jquery animate to animate the margin-right of content and width of sidebar

来源：https://stackoverflow.com/questions/6568986/set-contents-width-to-100-when-sidebar-is-hidden

标签

jquery

css

layout

sidebar