Bootstrap - hide column via animation

Question

I have the following layout in html:

<button>Hide first column</button>
<div class="row">
  <div class="col-lg-1" id="left">Stuff</div>
  <div class="col-lg-8" id="middle">Main Middle</div>
  <div class="col-lg-3">1 + 8 + 3 is 12 right?</div>
</div>

With the following JS/jQuery:

$(document).ready(function() {
    $('button').click(function() {
        $('#left').toggleClass('hidden');
        if ($("#left").hasClass('hidden')) {
            $("#middle").removeClass('col-lg-8');
            $("#middle").addClass('col-lg-9');
        } 
        else {
            $("#middle").removeClass('col-lg-9');
            $("#middle").addClass('col-lg-8');
        }
    });
}); 

As you can see essentially I'm removing the left column and widening out the middle ( I may eventually widen out the right as well).

Is there anyway to animate these changes as opposed to having them suddenly occur? I'm thinking something along the columns sliding to fill the space.

Here's the bootply: http://www.bootply.com/MWz4O7khWq

Thanks

Answer 1

I'm not working with bootstrap but with this you should get the idea:

$(document).ready(function () {
    originalwidth = $('#left').width();
    $('button').click(function () {
        if ($('#left').width() > 0) {
            $('#left').animate({
                width: "0"
            }, 500);
        }
        else {
            $('#left').animate({
                width: originalwidth
            }, 500);
        }
    });
});

.table {
    display: table;
    width: 500px;
    table-layout: fixed;
}
.row {
    display: table-row;
}
.row div {
    display: table-cell;
    border: 1px solid red;
    overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Hide first column</button>
<div class="table">
    <div class="row">
        <div class="col-lg-1" id="left">Stuff</div>
        <div class="col-lg-8" id="middle">Main Middle</div>
        <div class="col-lg-3">1 + 8 + 3 is 12 right?</div>
    </div>
</div>

Useful links:

• jQuery .animate()
• jQuery .width()
• Using CSS animations