Bootstrap 4 | Accordion - GeeksforGeeks

14 Oct, 2020
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.
Example:<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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>
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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>
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:<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>          <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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>Output:Accordion with gradient background: This is a simple of accordian with the gradient color effects.<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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>Output:Accordion with the picture: In this example the accordion will conatins picture within it.
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:<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>          <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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>
<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">          <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>          <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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>
Output:
Accordion with gradient background: This is a simple of accordian with the gradient color effects.
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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>
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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>
Output:
Accordion with the picture: In this example the accordion will conatins picture within it.
Example:<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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="https://media.geeksforgeeks.org/wp-content/uploads/20190808143838/logsm.png">                            </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="https://media.geeksforgeeks.org/wp-content/uploads/20191126170417/logo6.png">                            </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="https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png">                            </div>                        </div>                    </div>                </div>            </div>        </body>  </html>
<!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="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </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="https://media.geeksforgeeks.org/wp-content/uploads/20190808143838/logsm.png">                            </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="https://media.geeksforgeeks.org/wp-content/uploads/20191126170417/logo6.png">                            </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="https://www.geeksforgeeks.org/wp-content/uploads/html-768x256.png">                            </div>                        </div>                    </div>                </div>            </div>        </body>  </html>
Output:My Personal Notes
arrow_drop_upSave
AakashYadav4
Bootstrap-4
Bootstrap-Misc
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to align navbar items to the right in Bootstrap 4 ?
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?