Learn how to create an accordion using Bootstrap in this tutorial. To create a collapsible content requires javascript plugin to work on HTML pages. However, bootstrap collapse solves this problem of using the javascript and you can create accordion using bootstrap few classes.
Here is a simple Bootstrap collapse. Click the below button:-
Bootstrap collapse is the fastest way of creating collapsible content and in addition to this, you can also create accordion with it.
Create Bootstrap Collapse Using Anchor Link
Create a collapsible content using the Bootstrap on click of the anchor tag link. Now, to create an anchor link collapsible content, you have to use the attribute with value data-toggle="collapse" in the <a> tag. Use the id’s of the <div> tag as the href attribute value with the # symbol at the start.
Also, use the classs .collapse as the class of the content <div> tag as given below.
See the example below to understand the steps and the output as the collapsible and togglable content on click of the link.
|
1 2 3 4 5 6 |
<a class="btn btn-primary" data-toggle="collapse" href="#mycontentanchor">Click me to Collapse</a> <div class="collapse" id="mycontentanchor"> <div class="well"> This is the collapsible content displays on click of the anchor. </div> </div> |
Output
Create Bootstrap Collapse Using Button
You can also create a collapsible content using button element. The only difference between the link and the button is when you create collapsible content using the anchor link, you have to use attribute href while for a button you have to use data-target.
|
1 2 3 4 5 6 |
<button class="btn btn-primary" data-toggle="collapse" data-target="#mycontentbutton">Collapse me button</button> <div class="collapse" id="mycontentbutton"> <div class="well"> This is the collapsible content displays on click of the button. </div> </div> |
Output
Collapsible Panel
A collapsible content can also be created using the bootstrap collapsible panel. To create a collapsible panel, you have to follow the below-given steps.
- Create a <div> tag with the class
.panel-groupinside which you need to add another <div> tag with two classes.paneland.panel-default. - Now, put your heading and the collapsible content using the class
.panel-headingfor heading and classes.panel-collapseand.collapsefor collapsible content. - Give id’s to the collapsible content and use this id inside the heading <a> tag
hrefattribute with the attributedata-toggle="collapse".
In addition to all the above, you can also add the title inside the heading using the class .panel-title and content body using the class .panel-body inside the collapsible content.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="panel-group"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapsepanelone" data-toggle="collapse"> What is accordion? </a> </h4> </div> <div class="panel-collapse collapse" id="collapsepanelone"> <div class="panel-body"> An accordion is a group of collapsible content you can display in a small area using the togglable content to display on click of the button, anchor link. </div> </div> </div> </div> |
Output
How to Create Accordion Using Bootstrap
After learning the collapsible panel, it’s not difficult for you to create an accordion using bootstrap. Add multiple .panel and .panel-default classes with the content explained above inside the one class .panel-group
To make it work like accordion add id #accordion to the <div> element where you have added the class .panel-group.
To give accordion a final touch, you need to add the attribute data-parent with the value as the id given above. Check the example given below to see how it affects the accordion after and before the addition of attribute data-parent.
|
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 36 37 38 39 40 41 42 43 44 |
<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#accordian1" data-toggle="collapse" data-parent="#accordion"> What is accordion? </a> </h4> </div> <div class="panel-collapse collapse in" id="accordian1"> <div class="panel-body"> An accordion is a group of collapsible content you can display in a small area using the togglable content to display on click of the button, anchor link. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#accordian2" data-toggle="collapse" data-parent="#accordion"> What are the classes to create Bootstrap accordion? </a> </h4> </div> <div class="panel-collapse collapse" id="accordian2"> <div class="panel-body"> There are few classes panel, panel-default, panel-heading, panel-collapse, and collapse are the classes you can use to create your own accordion. </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#accordian3" data-toggle="collapse" data-parent="#accordion"> What is the collapse? </a> </h4> </div> <div class="panel-collapse collapse" id="accordian3"> <div class="panel-body"> Collapse is the togglable system hide and show content. When the content is in a hidden state, the collapse will display the content on click of a button. If the content is visible, the collapse system will hide the content on click of the button. </div> </div> </div> </div> |
Output
The above example contains the three collapsible content inside the class .panel-group and the id #accordion. Click each accordion to see the collapsible content.
You must also read.
How to Create Accordion with Plus/Minus Icons using Bootstrap.