<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container-fluid"> <div class="text-right" style="margin-bottom: 15px;"> <button class="btn btn-primary" id="collapse-toggle">Cấu hình</button> </div> <div class="" id="layout-collapse"> <div class="dynamic-col"> <div class="col-xs-12" style="background-color: lightgreen;">Test</div> </div> <div class="collapse-col"> <div class="fixed-wrapper"> <p>Draggable 1</p> <p>Draggable 2</p> <p>Draggable 3</p> <p>Draggable 4</p> <p>Draggable 5</p> </div> </div> </div> </div>

.dynamic-col { width: 100%; float: left; transition: all 0.3s linear; } .toggled .dynamic-col { width: calc(100% - 300px); } .collapse-col { width: 0; float: left; overflow: hidden; transition: all 0.3s linear; } .collapse-col .fixed-wrapper { width: 300px; padding: 0 15px; } .toggled .collapse-col { width: 300px; }

$('#collapse-toggle').on('click', function() { $('#layout-collapse').toggleClass('toggled'); })