This tutorial explains all about Bootstrap 4 Accordion. Learn to create Bootstrap accordion with background colors, etc.:
In this tutorial, you will learn what a Bootstrap 4 Accordion is, how to create a Bootstrap accordion, accordion with background colors, and frequently asked questions.
Please note that we have used Bootstrap version 4 in all examples.
=> Explore The Simple Bootstrap Training Series Here
Let’s begin!
Table of Contents:
What Is Bootstrap Accordion
A Bootstrap accordion is a vertically stacked list of items that can be toggled. It is similar to a collapse but uses the card component.
The following table summarizes the main classes and attributes that we have used in this tutorial.
| Class or Attribute | Usage |
|---|---|
| The .accordion class | This class is used to create an accordion. |
| The data-parent attribute | This attribute is used to ensure that all collapsible elements under the specified parent will be closed when a collapsible item is shown. |
| The .show class | This class is used to open an accordion by default. |
| The .bg-primary class | This class is used to add a blue color to the component. |
| The .bg-secondary class | This class is used to add a grey color to the component. |
| The .bg-success class | This class is used to add a green color to the component. |
| The .bg-danger class | This class is used to add a red color to the component. |
| The .bg-warning class | This class is used to add an orange color to the component. |
| The .bg-info class | This class is used to add a light blue color to the component. |
| The .bg-white class | This class is used to add a white color to the component. |
| The .bg-light class | This class is used to add a light grey color to the component. |
| The .bg-dark class | This class is used to add a dark grey color to the component. |
How To Create A Bootstrap Accordion
Add the .accordion class as a wrapper to create an accordion. It extends the default collapsible behavior.
If you want to make an accordion open (to show the collapsible content) by default, you need to add an additional class called the .show class. Otherwise, the accordion will not open by default, and you have to click the element to make it open.
Further, you can use custom CSS to add icons to accordions (for example, a Bootstrap accordion with arrow icons, etc.).
Example:
The below programming code shows an example of a basic accordion:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <div class="accordion" id="example"> <div class="card"> <div class="card-header"> <a data-toggle="collapse" href="#collapse1"> Collapsible Group Item 1 </a> </div> <div id="collapse1" class="collapse show" data-parent="#example"> <div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor. </div> </div> </div> <div class="card"> <div class="card-header"> <a data-toggle="collapse" href="#collapse2"> Collapsible Group Item 2 </a> </div> <div id="collapse2" class="collapse" data-parent="#example"> <div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor. </div> </div> </div> <div class="card"> <div class="card-header"> <a data-toggle="collapse" href="#collapse3"> Collapsible Group Item 3 </a> </div> <div id="collapse3" class="collapse" data-parent="#example"> <div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor. </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code.
Accordion With Background Colors
Use the following classes for background colors to create colored accordions:
- The .bg-primary class: This class is used to add a blue color to the component.
- The .bg-secondary class: This class is used to add a grey color to the component.
- The .bg-success class: This class is used to add a green color to the component.
- The .bg-danger class: This class is used to add red color to the component.
- The .bg-warning class: This class is used to add orange color to the component.
- The .bg-info class: This class is used to add a light blue color to the component.
- The .bg-white class: This class is used to add a white color to the component.
- The .bg-light class: This class is used to add a light grey color to the component.
- The .bg-dark class: This class is used to add a dark grey color to the component.
The below programming code shows an example of accordions with background colors:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <div class="accordion" id="example"> <div class="card bg-primary"> <div class="card-header"> <a class="text-light" data-toggle="collapse" href="#item1"> Collapsible Group Item 1 </a> </div> <div id="item1" class="collapse show" data-parent="#example"> <div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor. </div> </div> </div> <div class="card bg-secondary"> <div class="card-header"> <a class="text-light" data-toggle="collapse" href="#item2"> Collapsible Group Item 2 </a> </div> <div id="item2" class="collapse" data-parent="#example"> <div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor. </div> </div> </div> <div class="card bg-success"> <div class="card-header"> <a class="text-light" data-toggle="collapse" href="#item3"> Collapsible Group Item 3 </a> </div> <div id="item3" class="collapse" data-parent="#example"> <div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor. </div> </div> </div> <div class="card bg-danger"> <div class="card-header"> <a class="text-light" data-toggle="collapse" href="#item4"> Collapsible Group Item 4 </a> </div> <div id="item4" class="collapse" data-parent="#example"> <div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor. </div> </div> </div> <div class="card bg-warning"> <div class="card-header"> <a class="text-light" data-toggle="collapse" href="#item5"> Collapsible Group Item 5 </a> </div> <div id="item5" class="collapse" data-parent="#example"> <div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor. </div> </div> </div> <div class="card bg-info"> <div class="card-header"> <a class="text-light" data-toggle="collapse" href="#item6"> Collapsible Group Item 6 </a> </div> <div id="item6" class="collapse" data-parent="#example"> <div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor. </div> </div> </div> <div class="card bg-white"> <div class="card-header"> <a class="text-dark" data-toggle="collapse" href="#item7"> Collapsible Group Item 7 </a> </div> <div id="item7" class="collapse" data-parent="#example"> <div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor. </div> </div> </div> <div class="card bg-light"> <div class="card-header"> <a class="text-dark" data-toggle="collapse" href="#item8"> Collapsible Group Item 8 </a> </div> <div id="item8" class="collapse" data-parent="#example"> <div class="card-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor. </div> </div> </div> <div class="card bg-dark"> <div class="card-header"> <a class="text-light" data-toggle="collapse" href="#item9"> Collapsible Group Item 9 </a> </div> <div id="item9" class="collapse" data-parent="#example"> <div class="card-body text-white"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas porttitor. </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code:
Frequently Asked Questions
In this section, we will discuss some of the FAQs of the accordion. These questions will help you to prepare for your examinations and interviews confidently.
Q #1) What is the Bootstrap 4 accordion?
Answer: It is a vertically stacked list of items that can be toggled.
Q #2) What is the use of accordion?
Answer: They are used to toggle between items to hide and show a large amount of content.
Q #3) Is accordion hard to learn?
Answer: No, it is easy to learn. There are no advanced concepts.
Q #4) How do I change the color of my accordion in Bootstrap?
Answer: You can use one of the background color classes like the .bg-primary class, the .bg-secondary class, the .bg-success class, the .bg-danger class, the .bg-warning class, the .bg-info class, the .bg-white class, the .bg-light class and the .bg-dark class to change the color.
Q #5) How do I make an accordion open by default in Bootstrap?
Answer: You can add the .show class to make an accordion open by default.
Q #6) How do you expand all accordion panels?
Answer: By adding the .show class to all panels.
Conclusion
Accordions are similar to collapses, but the card component is used to create an accordion. Bootstrap uses background color classes to add colors to accordions. Further, there are several types of accordions, like an accordion with a background color, accordion with icons, etc.
Hope you have enjoyed this tutorial. Hope to see you soon with our next tutorial.
=> Take A Look At The Bootstrap Beginners Guide Here