Bootstrap Snippet Collapse Side Column using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

"Collapse Side Column"
Bootstrap 3.0.0 Snippet by Henry-Varro

Related: See More

Questions / Comments:

"Collapse Side Column" Bootstrap 3.0.0 Snippet by Henry-Varro

Related: See More

Questions / Comments:

"Collapse Side Column"
Bootstrap 3.0.0 Snippet by Henry-Varro