Skip to content
Related Articles

Related Articles

Bootstrap 4 | Accordion

View Discussion
Improve Article
Save Article
Like Article
  • Last Updated : 29 Apr, 2022

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: 

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: 
    • Example: 
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: 
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: 
  • Example: 
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_up
Previous
Bootstrap 4 | Wells
Next

Bootstrap 4 | Modal
Recommended Articles
Page :
How to automatically close all collapsible elements inside of the accordion when closing the accordion?
20, Jun 20
How to accordion scroll to top to open content in Bootstrap ?
20, Aug 19
How to make a Bootstrap 4 accordion collapse when clicking the whole header div ?
28, Nov 19
How to change (-, +) symbol with a button in Bootstrap Accordion ?
28, Nov 19
How to set horizontal aligned accordion in Bootstrap 4 ?
30, Dec 19
How to expand accordion from URL in Bootstrap?
14, Jan 21
Angular ngx Bootstrap Accordion Component
21, Jun 21
ReactJS MDBootstrap Accordion Component
05, Jan 22
Include Bootstrap in AngularJS using ng-bootstrap
18, Jun 19
Difference between bootstrap.css and bootstrap-theme.css
13, Mar 20
Difference between Bootstrap 4 and Bootstrap 5
09, Jul 20
Difference Between Bootstrap 3 and Bootstrap 4
02, Jun 20
How to get circular buttons in bootstrap 4 ?
08, Jul 19
Bootstrap Progress Bar and Jumbotron
09, Sep 17
Difference between Bootstrap and AngularJS
20, Mar 19
How to make Timepicker using Angular UI Bootstrap ?
03, Jun 21
How to create a two tone banner in bootstrap ?
19, Nov 20
How to write a form in different line using Bootstrap ?
21, Jul 21
Create a Single Page Responsive Website Using Bootstrap
29, Apr 21
How to configure modal width in Bootstrap?
14, Feb 20
How to remove arrow in dropdown in Bootstrap ?
25, Jun 19
Visibility of elements in bootstrap with Examples
26, Dec 18
Vertical alignment in Bootstrap with Examples
10, Jan 19
Bootstrap | Close Icon for dismissing content with Examples
15, Jan 19
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
skyridetim
@skyridetim
Vote for difficulty





Improved By :
Article Tags :
Report Issue

We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox

Start Your Coding Journey Now!