CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
StackOverflowed
StackOverflowed

Reputation: 5975

Bootstrap - hide column via animation

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 occur suddenly? I'm thinking something along the columns sliding to fill the space.

Upvotes: 6

Views: 4171

Answers (1)

Cheslab
Cheslab

Reputation: 1924

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:

Upvotes: 4

Related Questions