Bootstrap Accordion
It displays a simple accordion by extending the panel component. Use of the data-parent component makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible items is the display.
So many types of Accordion:
- Default Accordion
- Accordion with icons
- Accordion with gradient background
- Accordion with a picture
Default Accordion:
Basic Accordion there is no specialty in this Accordion but you can easily design this Accordion by yourself.
Example:
<div class="container"> <div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne">1. accordion</button> </h2> </div> <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> <p>enter content here,,,,,,,,</p> </div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo"> <h2 class="mb-0"> <button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo">2. accordion</button> </h2> </div> <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body"> <p>enter content here,,,,,,,,</p> </div> </div> </div> <div class="card"> <div class="card-header" id="headingThree"> <h2 class="mb-0"> <button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree">3. accordion</button> </h2> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body"> <p>enter content here,,,,,,,, </p> </div> </div> </div> </div> </div>
OUTPUT:
Accordion with changeable icons:
Add plus and minus icons in accordion with the help of font-awesome and toggle when you open an accordion with the help of jQuery or javascript.
Example:
<div class="container mt-3"> <div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> <button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"><i class="fa fa-plus"></i> 1.accordionExample</button> </h2> </div> <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> <p>enter content here.............!</p> </div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo"> <h2 class="mb-0"> <button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"><i class="fa fa-plus"></i> 2.accordionExample</button> </h2> </div> <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body"> <p>enter content here.............! </p> </div> </div> </div> <div class="card"> <div class="card-header" id="headingThree"> <h2 class="mb-0"> <button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree"><i class="fa fa-plus"></i> 3.accordionExample</button> </h2> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body"> <p>enter content here.............!</p> </div> </div> </div> </div> </div>
Script:
<script> $(document).ready(function(){ // Add minus icon for collapse element which is open by default $(".collapse.show").each(function(){ $(this).prev(".card-header").find(".fa").addClass("fa-minus").removeClass("fa-plus"); }); // Toggle plus minus icon on show hide of collapse element $(".collapse").on('show.bs.collapse', function(){ $(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus"); }).on('hide.bs.collapse', function(){ $(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus"); }); }); </script>
OUTPUT:
Accordion with gradient background:
It is simply the accordion with the gradient color effects.
Example:
<div class="container"> <h4>gradient background</h4> <div id="accordion"> <div class="card"> <div class="card-header"> <a class="card-link" data-toggle="collapse" href="#description1"> 1accordion </a> </div> <div id="description1" class="collapse show" data-parent="#accordion"> <div class="card-body"> enter text here.... </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#description2"> 2.accordion </a> </div> <div id="description2" class="collapse" data-parent="#accordion"> <div class="card-body"> enter text here.... </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#description3"> 3.accordion </a> </div> <div id="description3" class="collapse" data-parent="#accordion"> <div class="card-body"> enter text here.... </div> </div> </div> </div> </div>
Style:
.card-header{ background-image: linear-gradient(to bottom, pink , orange); } .card-body{ background-image: linear-gradient(to right, pink, orange); }
OUTPUT:
Accordion with the picture:
accordion will contains picture within it.
Example:
<div class="container"> <h4> Accordion with the picture</h4> <div id="accordion"> <div class="card"> <div class="card-header"> <a class="card-link" data-toggle="collapse" href="#description1"> 1.Accordion </a> </div> <div id="description1" class="collapse show" data-parent="#accordion"> <div class="card-body"> enter content here..... </div> <div class="right-body"> <img src= "https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png"> </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#description2"> 2.Accordion </a> </div> <div id="description2" class="collapse" data-parent="#accordion"> <div class="card-body"> enter content here..... </div> <div class="right-body"> <img src= "https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png"> </div> </div> </div> <div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" href="#description3"> 3.Accordion </a> </div> <div id="description3" class="collapse" data-parent="#accordion"> <div class="card-body"> enter content here..... </div> <div class="right-body"> <img src= "https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png"> </div> </div> </div> </div> </div>
OUTPUT: