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.

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.

Output

Collapse me anchor
This is the collapsible content displays on click of the anchor.

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.

Output

Collapse me button
This is the collapsible content displays on click of the anchor button.

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-group inside which you need to add another <div> tag with two classes .panel and .panel-default.
  • Now, put your heading and the collapsible content using the class .panel-heading for heading and classes .panel-collapse and .collapse for collapsible content.
  • Give id's to the collapsible content and use this id inside the heading <a> tag href attribute with the attribute data-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.

Output

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.

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.

Output

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.
There are few classes panel, panel-default, panel-heading, panel-collapse, and collapse are the classes you can use to create your own accordion.
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.

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.

References

Getbootstrap Doc

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.