Animated Columns

SO: http://stackoverflow.com/q/12520751/570918

by Prashanth bhat

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row-fluid">
    <div id="col2" class="span0"></div>
    <div id="col1" class="span12">
        <a id="trig" class="btn btn-inverse">Reflow Me</a>
    </div>
    
  </div>
</div>

CSS

.row-fluid div {
    height: 200px;
    -webkit-transition: width 0.3s ease, margin 0.3s ease;
    -moz-transition: width 0.3s ease, margin 0.3s ease;
    -o-transition: width 0.3s ease, margin 0.3s ease;
    transition: width 0.3s ease, margin 0.3s ease;
}

.row-fluid .span0 {
    width: 0%;
}

#col1 {
    background-color: #A6BFBA;
}

#col2 {
    background-color: #DE4124;
}

#trig {
    margin: 50px;
}

.row-fluid .span0 + [class*="span"]{
    margin-left: 0;
}

JavaScript

$('#trig').on('click', function () {
    $('#col1').toggleClass('span12 span3');
    $('#col2').toggleClass('span0 span9');
});