Bootstrap Basic Collapsible
Bootstrap Collapsibles can be used to hide/show large amount of content.
Here’s the sample code for a basic collapsible element
1 2 3 4 | <button data-toggle="collapse" data-target="#demo">Collapsible</button> <div id="demo" class="collapse"> Bootstrap Collapsible Demo </div> |
Here, the .collapse
class is the basic contextual class for the collapsible element.
You can use this class with elements like <div>
; thus, the content can be hidden or made visible for that specific <div>
by just clicking a button.
The data-toggle="collapse"
attribute is used with the button element for controlling the collapsible content.
The connection between the collapsible element and the button is indicated using the data-target="#id"
.
If you’re using an <a>
element, the
Observe the below code for the illustration:
1 2 3 4 5 | <a href="#demo" data-toggle="collapse">Collapsible</a> <div id="demo" class="collapse"> Bootstrap Collapsible Demo </div> |
The collapsible content is always hidden by default.
However, if you want it to be shown by default, you can use the .in
class
1 2 3 | <div id="demo" class="collapse in"> Bootstrap Collapsible Demo </div> |
Bootstrap Collapsible panel
Bootstrap has a provision for collapsible panel as well. Following code will illustrate the same:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" href="#collapse1">Collapsible panel</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse"> <div class="panel-body">Panel Body</div> <div class="panel-footer">Panel Footer</div> </div> </div> </div> |
Bootstrap Collapsible List Group
You can also create a collapsible list group using following code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" href="#collapse1">Collapsible list group</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse"> <ul class="list-group"> <li class="list-group-item">One</li> <li class="list-group-item">Two</li> <li class="list-group-item">Three</li> </ul> <div class="panel-footer">Footer</div> </div> </div> </div> |
Bootstrap Accordion
Accordion is a special extension of collapsible component where you can group multiple panels to be individually collapsible.
You need to specify a parent for these collapsible elements using data-parent so that at a time at most one element is visible.
Here’s the code for illustrating the accordion feature:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> Collapsible Group 1</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in"> <div class="panel-body">Here is an example for accordion element. The panels here are specified under same parent and will be visible by the maximum of one at a time. You can click on different panels in the group to see the effect</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> Collapsible Group 2</a> </h4> </div> <div id="collapse2" class="panel-collapse collapse"> <div class="panel-body">Here is another collapsible panel for accordion element. The panels here are specified under same parent and will be visible by the maximum of one at a time. You can click on different panels in the group to see the effect</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse3"> Collapsible Group 3</a> </h4> </div> <div id="collapse3" class="panel-collapse collapse"> <div class="panel-body">This is another collapsible panel for accordion element. The panels here are specified under same parent and will be visible by the maximum of one at a time. You can click on different panels in the group to see the effect</div> </div> </div> </div> |
Bootstrap Collapse Event
Here’s a list of collapse events:
- bs.collapse
- bs.collapse
- bs.collapse
- bs.collapse