Twitter Bootstrap - slide a Span left/right

Question

I'm using twitter bootstrap spans to form two columns in a grid layout. I want to enable the user to close the left-most span so the right span fills the viewport. I've done this by hiding the left panel and changing the width of the right panel and that works fine. However I'd prefer to have the left panel slide closed and the right panel width change to fill the remaining space. The best I've come up with so far is:

if ( show )
    $('.content-panel').css( { width: '76.6%' } );

$('.left-panel').animate( {width: 'toggle'}, function(){
    if ( !show )
        $('.content-panel').css( { width: '100%' } );
});

where .content panel is the right hand column. This sort of works but looks pretty clunky. It really needs both spans to resize together. Any suggestions most welcome.

Answer 1

For fun I hacked Voodoo's example and used the Javascript to manipulate the classes, then CSS transitions to manage the animation: http://jsfiddle.net/WDV69/29/

Not necessarily a better solution, just different.

Appologies if my javascript is a bit rough, it's not really my department.

$("#closeTrigger").click(function() {

$('.container').removeClass('openLeft').addClass('closeLeft');  
});

$("#openTrigger").click(function() {
$('.container').removeClass('closeLeft').addClass('openLeft');  
});