Twitter Bootstrap fluid-container Sidebar Toggle

I'm using twitter bootstrap to develop an app. 2 column layout. One sidebar and main content. Following is the layout.

<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> 

On clicking a link inside the content i want to hide the sidebar and the content to take up the entire page. Currently I managed to do it this way,

$(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'),
  });
});
});

But i see a margin in the left side after hiding the span3. This need to be removed. Also in this method of hiding, on the first click the span3 hides and span9 changes to span12. That is somehow working fine. But on second click span3 shows first and then only content span12 reduces to span9. Due to this content jumps down till it it reduces to span9. I want to fix this. On second click, span12 to span 9 first and then sidebar show.. something like that.

I have seen many posts similar to this in which classes "content" and "sidebar" is used instead of 'spanXX'. But its not working in my case. I donno why. Help me please..