/    /  Bootstrap Accordion

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:

 

  1. Default Accordion
  2. Accordion with icons
  3. Accordion with gradient background
  4. 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:

 

Bootstrap4 Accordion

 

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:

 

Bootstrap4 Accordion

 

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:

 

Bootstrap4 Accordion

 

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:

 

Bootstrap4 Accordion