Bootstrap 4 Accordions with Examples

How to Use Bootstrap 4 Accordions with Examples

The accordion is a kind of collapsable list which shows one item at a time. These items are panels and an accordion resembles a tab control with tabs, but is vertically stacked by default. There are two bootstrap default classes used for creating accordions .accordion and .card.To create an accordion for a website with Bootstrap 4, it’s necessary to include the default Bootstrap CSS and Javascript files in the tag of html file.The following HTML5 page renders a simple accordion with collapsible card.The card is displayed or hidden when the appropriate button is clicked.

Here is code example for accordion with collapsible card :

 <div class="container">
     <div id="accordion">
         <div class="card">
             <div class="card-header">      				
                 <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
       First accordion 
   </a>
             </div>
             <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                 <div class="card-body">
                     Add content for first accordion.
      	   </div>
             </div>
         </div>
     </div>	
</div>

Here is output for the first accordion which is clickable:

After click on this collapsible card will be displayed.

This is basic structure for creating bootstrap 4 accordions. If you need to create multiple accordion, just add and repeat this html inside #accordion : and change id for each div below anchor link.

 <div class="card">
             <div class="card-header">      				
                 <a data-toggle="collapse" href="#collapsetwo" aria-expanded="true" aria-controls="collapsetwo">
       Second accordion 
   </a>
             </div>
             <div id="collapsetwo" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                 <div class="card-body">
                     Add content for second accordion.
      	   </div>
             </div>
   </div>

If you want to add more style to your accordion you can use font-awesome library and custom
Css.