Open In App

Bootstrap 4 | Collapse

Last Updated : 25 Jul, 2024
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

Bootstrap 4 offers different classes for creating collapsible elements. A collapsible element is used to hide or show a large amount of content. When clicking a button it targets a collapsible element, the class transition takes place as follows: 
 

  • .collapse: It hides the content.
  • .collapsing: It applied during transitions.
  • .collapse.show: It shows the content.


Basic Collapsible:

The .collapse class indicates a collapsible element i.e. the content that will be shown or hidden with a click of a button. To control (show/hide) the collapsible content, add data-toggle = "collapse" attribute to an anchor or a button element. Then add data-target = "#collapseExample" attribute to connect the button with the collapsible content.
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>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f0f0f0;
            padding: 2rem;
        }

        h2 {
            color: #007bff;
            font-size: 2rem;
            margin-bottom: 1.5rem;
        }

        .btn-custom {
            background-color: #28a745;
            border-color: #28a745;
            color: white;
            transition: background-color 0.3s ease;
        }

        .btn-custom:hover {
            background-color: #218838;
            border-color: #1e7e34;
        }

        .card-body {
            background-color: #ffffff;
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
        }

        .collapse-container {
            background-color: #ffffff;
            padding: 2rem;
            border-radius: 0.25rem;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
    <div class="container collapse-container">
        <!-- Button trigger modal -->
        <h2 class="mb-1">
            Toggle Collapse
        </h2>

        <p>
            <a class="btn btn-custom mb-2" data-toggle="collapse" href="#example_1" role="button" aria-expanded="false" aria-controls="example_1">
                GeeksforGeeks
            </a>

            <button class="btn btn-custom mb-2" type="button" data-toggle="collapse" data-target="#example_2" aria-expanded="false" aria-controls="example_2">
                Bootstrap
            </button>
        </p>

        <div class="collapse" id="example_1">
            <div class="card card-body">
                GeeksforGeeks is a computer science portal. It is the best platform to learn programming.
            </div>
        </div>

        <div class="collapse" id="example_2">
            <div class="card card-body">
                Bootstrap is a free and open-source collection of tools for creating websites and web applications. It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.
            </div>
        </div>
    </div>
</body>

</html>

Output: 

Bootstrap-4-Collapse1


Multi Toggle Collapsible:

A button or anchor tag can show or hide multiple elements by referencing them with a JQuery selector in its href or data-target attribute. Multiple button or anchor tag can show and hide an element if they can reference it with their href or data-target attribute.
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>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
            padding: 2rem;
        }

        h2 {
            color: #007bff;
            font-size: 2rem;
            margin-bottom: 1.5rem;
        }

        .btn-custom {
            background-color: #28a745;
            border-color: #28a745;
            color: white;
            margin-right: 10px;
            transition: background-color 0.3s ease;
        }

        .btn-custom:hover {
            background-color: #218838;
            border-color: #1e7e34;
        }

        .card-body {
            background-color: #ffffff;
            border: 1px solid #dee2e6;
            border-radius: 0.25rem;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .collapse-container {
            background-color: #ffffff;
            padding: 2rem;
            border-radius: 0.25rem;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .mb-1 {
            margin-bottom: 1rem !important;
        }
    </style>
</head>

<body>
    <div class="container collapse-container">
        <h2 class="mb-1">
            Toggle Collapse
        </h2>

        <p>
            <a class="btn btn-custom" data-toggle="collapse" href="#collapse1" role="button" aria-expanded="false"
                aria-controls="collapse1">
                Toggle GeeksforGeeks
            </a>

            <button class="btn btn-custom" type="button" data-toggle="collapse" data-target="#collapse2"
                aria-expanded="false" aria-controls="collapse2">
                Toggle Bootstrap
            </button>

            <button class="btn btn-custom" type="button" data-toggle="collapse" data-target=".multi-collapse"
                aria-expanded="false" aria-controls="collapse1 collapse2">
                Toggle both
            </button>
        </p>

        <div class="collapse multi-collapse" id="collapse1">
            <div class="card card-body">
                GeeksforGeeks is a computer science portal. It is the best platform to learn programming.
            </div>
        </div>

        <div class="collapse multi-collapse" id="collapse2">
            <div class="card card-body">
                Bootstrap is a free and open-source collection of tools for creating websites and web applications. It is
                the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.
            </div>
        </div>
    </div>
</body>

</html>

Output:

Accordion:

The following example shows a simple accordion by extending the panel component. The use of data-parent attribute to makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible items is shown.
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>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
            padding: 2rem;
        }

        h2 {
            color: #19d665;
            font-size: 2rem;
            margin-bottom: 1.5rem;
        }

        .card-header {
            background-color: #27de4e;
            color: white;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .card-header:hover {
            background-color: #19ca0d;
        }

        .card-link {
            color: white;
            text-decoration: none;
        }

        .card-link:hover {
            color: white;
            text-decoration: none;
        }

        .card-body {
            background-color: #ffffff;
            border: 1px solid #dee2e6;
            border-top: none;
            border-radius: 0 0 0.25rem 0.25rem;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .card {
            margin-bottom: 1rem;
            border: none;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>
            Accordion
        </h2>

        <div id="accordion">
            <div class="card">
                <div class="card-header" id="headingOne">
                    <h5 class="mb-0">
                        <a class="card-link" data-toggle="collapse" href="#description1" aria-expanded="true" aria-controls="description1">
                            GeeksforGeeks
                        </a>
                    </h5>
                </div>

                <div id="description1" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                    <div class="card-body">
                        GeeksforGeeks is a computer science portal. It is the best platform to learn programming.
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header" id="headingTwo">
                    <h5 class="mb-0">
                        <a class="collapsed card-link" data-toggle="collapse" href="#description2" aria-expanded="false" aria-controls="description2">
                            Bootstrap
                        </a>
                    </h5>
                </div>

                <div id="description2" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                    <div class="card-body">
                        Bootstrap is a free and open-source collection of tools for creating websites and web applications.
                        It is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header" id="headingThree">
                    <h5 class="mb-0">
                        <a class="collapsed card-link" data-toggle="collapse" href="#description3" aria-expanded="false" aria-controls="description3">
                            HTML
                        </a>
                    </h5>
                </div>

                <div id="description3" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                    <div class="card-body">
                        HTML stands for Hyper Text Markup Language. It is used to design web pages using markup language. HTML is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. Markup language is used to define the text document within tag which defines the structure of web pages.
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Output: 


Next Article
Bootstrap 4 | Dropdowns

G
GaganTalreja1
Improve
Article Tags :

Similar Reads

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