Bootstrap - hide a column through 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, I delete the left column and expand the middle (in the end, I can expand as well).

Is there anyway to revive these changes, and not to suddenly arise? I think something along the columns sliding to fill the space.

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

thanks

Answer 1

I do not work with bootstrap, but with this you should get an 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>

Run codeHide result

Useful links:

• the jQuery . animate ()
• the jQuery . width ()
• CSS