<div class="container-fluid">
<div class="row" id="row-main">
<div class="col-md-3" id="sidebar">
</div>
<div class="col-md-9" id="content">
<button type="button" class="btn btn-default toggle-sidebar">Toggle sidebar</button>
</div>
</div>
</div>#row-main {
overflow-x: hidden;
}
#content, #sidebar {
height: 100vh;
}
#content {
background-color: lightblue;
-webkit-transition: width 0.3s ease;
-moz-transition: width 0.3s ease;
-o-transition: width 0.3s ease;
transition: width 0.3s ease;
}
#sidebar {
background-color: gray;
-webkit-transition: margin 0.3s ease;
-moz-transition: margin 0.3s ease;
-o-transition: margin 0.3s ease;
transition: margin 0.3s ease;
}
.collapsed {
margin-left: -25%;
}
button {
margin-top: 10px;
}
$(document).ready(function() {
$(".toggle-sidebar").click(function() {
$("#sidebar").toggleClass("collapsed");
$("#content").toggleClass("col-md-12 col-md-9");
});
});
