Twitter Bootstrap fluid-container Sidebar Toggle

Я использую 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 до span9, а затем боковая панель... что-то вроде этого.

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