Bootstrap 3 - Dynamic Columns

by SHELDON PASCIAK

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<h2>Toggle Visibility</h2>
<div class="btn-group" data-toggle="buttons" id="toggleColumns">
    <label class="btn btn-primary active">
        <input type="checkbox" checked="checked" value="1"/> Col 1
    </label>
    <label class="btn btn-primary active">
        <input type="checkbox" checked="checked" value="2"/> Col 2
    </label>
    <label class="btn btn-primary active">
        <input type="checkbox" checked="checked" value="3"/> Col 3
    </label>
    <label class="btn btn-primary active">
        <input type="checkbox" checked="checked" value="4"/> Col 4
    </label>
    <label class="btn btn-primary active">
        <input type="checkbox" checked="checked" value="5"/> Col 5
    </label>
    <label class="btn btn-primary active">
        <input type="checkbox" checked="checked" value="6"/> Col 6
    </label>    
</div>

<h2>Columns:</h2>
<div class="row" id="myColumns">
    <div class="col-md-2">1</div>
    <div class="col-md-2">2</div>
    <div class="col-md-2">3</div>
    <div class="col-md-2">4</div>
    <div class="col-md-2">5</div>
    <div class="col-md-2">6</div>
</div>














<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
                Find documentation: <a href='http://getbootstrap.com/css/'>Get Bootstrap 3</a><br/>
                Fork This Skeleton Here: <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootstrap 3 Skeleton</a><br/>
                <div>

CSS

#myColumns div {
    border: 1px solid grey;
}

JavaScript

var $myCols =  $("#myColumns");
$("#toggleColumns input").change(function() {
var xxx  = -1;
    var index = +xxx ;//this.value - 1;
    console.log(index);
    var visible = this.checked;
    var col = $myCols.children().get(index);
    $(col).toggle(visible);
    
    resizeColumns();
});

function resizeColumns() {
    var visibleCols = $myCols.children(":visible").length;

    var div = Math.floor(12 / visibleCols);
    var rem = 12 % visibleCols;
    
    var colSize = (rem === 0) ? div : 2;
    
    $myCols.children().removeClass().addClass('col-md-'+colSize);

}