Я использую Twitter bootstrap для разработки приложения. 2 колонки. Одна боковая панель и основной контент. Ниже приведен макет.

<div class="container-fluid">
<div class="row-fluid">
<div class="span3 target">
<!--Sidebar content-->
</div>
<div class="span9 ">
        <i class="icon-chevron-left toggles"></i>
<!--Body content-->
</div>
</div>
</div> 

При нажатии на ссылку внутри содержимого я хочу скрыть боковую панель и содержимое, чтобы занять всю страницу. В настоящее время мне удалось сделать это таким образом,

$(document).ready(function(){
$(window).resize(function () { plot(); });

$('.toggles').click(function() {
  $('.target').toggle('fast', function() {
    $('.contents').toggleClass('span12'),
    $('.contents').toggleClass('span9'),
    $('.toggles').toggleClass('icon-chevron-right'),
  });
});
});

Но я вижу поле в левой части после скрытия span3. Это нужно убрать. Также в этом методе скрытия, при первом щелчке span3 скрывается, а span9 изменяется на span12. Тот как-то работает нормально. Но при втором щелчке span3 показывает сначала, а затем только содержимое span12 уменьшается до span9. Из-за этого содержание скачет вниз, пока оно не сократится до span9. Я хочу все исправить. При втором щелчке, span12 для span 9 сначала, а затем боковая панель показать.. что-то вроде того.

Я видел много сообщений, подобных этому, в которых классы "content" и "sidebar" используются вместо "spanXX". Но в моем случае это не работает. Я не знаю почему. Помогите мне, пожалуйста..