Bootstrap 4 | Accordian

The following example displays a simple accordion by extending the panel component. The use of the data-parent attribute to makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible items is display.
There are so many types of Accordion

  • Default Accordion
  • Accordion with icons
  • Accordion with gradient background
  • Accordion with a picture

Below you will see each of them in action with the proper example.

    Default Accordion: This is basic Accordion there is no specialty in this Accordion but you can easily design this Accordion by yourself.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>Bootstrap Collapse Demonstration</title>
      
        <meta charset="utf-8">
        <meta name="viewport" 
              content="width=device-width, initial-scale=1">
      
        <link rel="stylesheet" href=
      
        <script src=
        </script>
      
        <script src=
        </script>
      
        <script src=
        </script>
      
        <head>
      
            <body>
                <div class="container">
      
                    <h2 style="padding-bottom: 15px; color:green;"
                     GeeksforGeeks 
                    </h2>
                    <p>A Computer Science Portal for Geeks</p>
      
                    <div id="accordion">
                        <div class="card">
                            <div class="card-header">
                                <a class="card-link" 
                                   data-toggle="collapse"
                                   href="#description1"
                                       GeeksforGeeks 
                                 </a>
                            </div>
      
                            <div id="description1" 
                                 class="collapse show" 
                                 data-parent="#accordion">
                                <div class="card-body">
                                  GeeksforGeeks is a computer science portal.
                                  It is the best platform to lean programming.
                                </div>
                            </div>
                        </div>
      
                        <div class="card">
                            <div class="card-header">
                                <a class="collapsed card-link" 
                                   data-toggle="collapse"
                                   href="#description2"
                                   Bootstrap 
                                 </a>
                            </div>
                            <div id="description2" 
                                 class="collapse" 
                                 data-parent="#accordion">
                                <div class="card-body">
                                   Bootstrap is free and open-source 
                                   collection of tools for creating 
                                   websites and web applications.
                                </div>
                            </div>
                        </div>
      
                        <div class="card">
                            <div class="card-header">
                                <a class="collapsed card-link" 
                                   data-toggle="collapse" 
                                   href="#description3"
                                   HTML 
                                </a>
                            </div>
                            <div id="description3" 
                                 class="collapse" 
                                 data-parent="#accordion">
                                <div class="card-body">
                                  HTML stands for HyperText Markup Language. 
                                  It is used to design web pages using markup
                                  language.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </body>
      
    </html>

    chevron_right

    
    

  • Output:
  • Accordion with changeable icons: This example will show you how to 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.

    • Example:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!DOCTYPE html>
      <html lang="en">
        
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content=
              "width=device-width, initial-scale=1,
              shrink-to-fit=no">
            
          <title>Bootstrap 4 Accordion </title>
            
          <link rel="stylesheet" href=
            
          <link rel="stylesheet" href=
            
          <script src=
          </script>
            
          <script src=
          </script>
            
          <script src=
          </script>
            
          <style>
              .accordion {
                  margin: 15px;
              }
                
              .accordion .fa {
                  margin-right: 0.2rem;
              }
          </style>
            
          <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>
      </head>
        
      <body>
          <div class="accordion">
              <h2 style="padding-bottom: 15px; color:green;"
                  GeeksforGeeks 
              </h2>
                
              <p>A Computer Science Portal for Geeks</p>
                
              <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>
                                  GeeksforGeeks
                              </button>                                
                          </h2>
                      </div>
                        
                      <div id="collapseOne" class="collapse"
                          aria-labelledby="headingOne"
                          data-parent="#accordionExample">
                          <div class="card-body">
                              <p>
                                  GeeksforGeeks is a computer
                                  science portal. It is the best
                                  platform to lean programming.
                              </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>
                                  Bootstrap
                              </button>
                          </h2>
                      </div>
                      <div id="collapseTwo" class="collapse show"
                          aria-labelledby="headingTwo"
                          data-parent="#accordionExample">
                          <div class="card-body">
                              <p>
                                  Bootstrap is a free and open-source
                                  collection of tools for creating
                                  websites and web applications.
                              </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>
                                  HTML
                              </button>                    
                          </h2>
                      </div>
                      <div id="collapseThree" class="collapse"
                          aria-labelledby="headingThree"
                          data-parent="#accordionExample">
                          <div class="card-body">
                              <p>
                                  HTML stands for HyperText Markup
                                  Language. It is used to design
                                  web pages using markup language.
                              </p>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </body>
        
      </html>

      chevron_right

      
      

    • Output:

    Accordion with gradient background: This is a simple of accordian with the gradient color effects.

    • filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <!DOCTYPE html>
      <html lang="en">
        
      <head>
          <title>Bootstrap Collapse Demonstration</title>
        
          <meta charset="utf-8">
          <meta name="viewport" 
                content="width=device-width, initial-scale=1">
        
          <link rel="stylesheet" href=
        
          <script src=
          </script>
        
          <script src=
          </script>
        
          <script src=
          </script>
          <style>
          .card-header{
              background-image: linear-gradient(to bottom, green, yellow);
          }
          .card-body{
              background-image: linear-gradient(to right, yellow, white);
          }
          </style>
          <head>
        
              <body>
                  <div class="container">
        
                      <h2 style="padding-bottom: 15px; color:green;"
                       GeeksforGeeks 
                      </h2>
                      <p>A Computer Science Portal for Geeks</p>
        
                      <div id="accordion">
                          <div class="card">
                              <div class="card-header">
                                  <a class="card-link" 
                                  data-toggle="collapse" 
                                  href="#description1">
                                      GeeksforGeeks 
                                  </a>
                              </div>
                              <div id="description1" 
                                   class="collapse show" 
                                   data-parent="#accordion">
                                  <div class="card-body">
                                    GeeksforGeeks is a computer science portal.
                                    It is the best platform to lean programming.
                                  </div>
                              </div>
                          </div>
        
                          <div class="card">
                              <div class="card-header">
                                  <a class="collapsed card-link" 
                                     data-toggle="collapse"
                                     href="#description2"
                                     Bootstrap 
                                   </a>
                              </div>
                              <div id="description2" 
                                   class="collapse" 
                                   data-parent="#accordion">
                                  <div class="card-body">
                                     Bootstrap is a free and open-source 
                                     collection of tools for creating 
                                     websites and web applications.
                                  </div>
                              </div>
                          </div>
        
                          <div class="card">
                              <div class="card-header">
                                  <a class="collapsed card-link" 
                                     data-toggle="collapse" 
                                     href="#description3"
                                     HTML 
                                  </a>
                              </div>
                              <div id="description3" 
                                   class="collapse" 
                                   data-parent="#accordion">
                                  <div class="card-body">
                                    HTML stands for Hyper Text Markup 
                                    Language. It is used to design web 
                                    pages using markup language.
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </body>
        
      </html>

      chevron_right

      
      

    • Output:

    Accordion with the picture: In this example the accordion will conatins picture within it.

  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html lang="en">
      
    <head>
        <title>Bootstrap Collapse Demonstration</title>
      
        <meta charset="utf-8">
        <meta name="viewport" 
              content="width=device-width, initial-scale=1">
      
        <link rel="stylesheet" href=
      
        <script src=
        </script>
      
        <script src=
        </script>
      
        <script src=
        </script>
        <style>
            .card{
                width:600px;
            }
            .card-body{
                width:400px;
                float: left;
            }
            .right-body{
                width:100px;
                margin:10px;
                float : right;
            }
            img{
                width:100px;
                height:100px;
            }
        </style>
        <head>
      
            <body>
                <div class="container">
      
                    <h2 style="padding-bottom: 15px; color:green;"
                     GeeksforGeeks 
                    </h2>
                    <p>A Computer Science Portal for Geeks</p>
      
                    <div id="accordion">
                        <div class="card">
                            <div class="card-header">
                                <a class="card-link" 
                                data-toggle="collapse" 
                                href="#description1">
                                    GeeksforGeeks 
                                </a>
                            </div>
                            <div id="description1" 
                                 class="collapse show" 
                                 data-parent="#accordion">
                                <div class="card-body">
                                  GeeksforGeeks is a computer science portal.
                                  It is the best platform to lean programming.
                                </div>
                                <div class="right-body">
                                    <img src=
                                </div>
                            </div>
                        </div>
      
                        <div class="card">
                            <div class="card-header">
                                <a class="collapsed card-link" 
                                   data-toggle="collapse"
                                   href="#description2"
                                   Bootstrap 
                                 </a>
                            </div>
                            <div id="description2" 
                                 class="collapse" 
                                 data-parent="#accordion">
                                <div class="card-body">
                                   Bootstrap is a free and open-source 
                                   collection of tools for creating 
                                   websites and web applications.
                                </div>
                                <div class="right-body">
                                    <img src=
                                </div>
                            </div>
                        </div>
      
                        <div class="card">
                            <div class="card-header">
                                <a class="collapsed card-link" 
                                   data-toggle="collapse" 
                                   href="#description3"
                                   HTML 
                                </a>
                            </div>
                            <div id="description3" 
                                 class="collapse" 
                                 data-parent="#accordion">
                                <div class="card-body">
                                  HTML stands for Hyper Text Markup 
                                  Language. It is used to design web 
                                  pages using markup language.
                                </div>
                                <div class="right-body">
                                    <img src=
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </body>
      
    </html>

    chevron_right

    
    

  • Output:



  • My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.