Установить ширину содержимого на 100%, когда боковая панель скрыта?

Question

Заранее, простите меня за мой плохой английский.

Хорошо, вот мой живой сайт: http://bleachindonesia.com/forum/

Если вы заметили маленький X слева, это переключение, чтобы показать / скрыть боковую панель. JQuery работает нормально. Единственная проблема заключается в том, что ширина содержимого не станет шире (до 100%) / не заполнит пустое пространство, когда я скрою боковую панель (боковая панель оставит пустое пространство, когда она скрыта).

Мне нужно, чтобы ширина содержимого составляла 100%, когда боковая панель скрыта, но при этом сохраняется плавная анимация. Возможно, как на форуме vBulletin .

Вот, к примеру, jQuery:

//<!--
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);
    });
}
//-->

Я знаю, что это что-то раздутое, возможно, если есть способ минимизировать это, было бы очень полезно. Кто-нибудь может помочь?

Answer 1

Вы можете просто настроить ширину content как часть ваших функций переключения.Что-то вроде:

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

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

Answer 2

В приведенном вами примере они делают margin-right: 290px для области содержимого, показывая боковую панель и ширину боковой панели как 270px, а при скрытии они создают margin-right: 0px;и width как 0px;

используйте jquery animate для анимации правого края содержимого и ширины боковой панели