Open In App

Bootstrap 5 Collapse Multiple Targets

Last Updated : 10 Feb, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Collapse multiple targets can be used to show or hide multiple elements by assigning them a common group and using a single <button> or <a> tag to hide/show them. We can achieve this by assigning the common class in the data-bs-target attribute of the button or link.

Bootstrap 5 Collapse Multiple TargetsClass: No special classes or attributes are used for this, the target is just needed to be taken care of.

Syntax:

<button class="btn" type="button" data-bs-toggle="collapse" 
    data-bs-target=".element-Selector">
    ....
</button>

<div class="collapse element-selector">

    . . .
</div>
<p class="collapse element-selector">

    . . . 
</p>

Example 1: The code below demonstrates how we can target multiple collapse targets by using data attributes:

HTML




<!doctype html>
<html lang="en">
  
<head>
    <link href=
          rel="stylesheet">
    <script src=
    </script>
</head>
  
<body>
    <h1 class="m-4 text-success">GeeksforGeeks</h1>
    <h4 class="ms-4">Bootstrap 5 Collapse Multiple Targets</h4>
    <div class="container d-flex flex-row m-4">
        <p>
            <a class="btn btn-success" 
               data-bs-toggle="collapse" 
               href="#collapseExample_1" 
               role="button">
                Toggle first
                element
            </a>
            <a class="btn btn-success" 
               data-bs-toggle="collapse" 
               href="#collapseExample_2" 
               role="button">
                Toggle second element
            </a>
        </p>
    </div>
    <div class="container">
        <div class="bg-light text-center collapse m-col fade" 
             id="collapseExample_1">
            <img src=
                 width="450" 
                 height="260">
        </div>
        <div class="collapse m-col" 
             id="collapseExample_2">
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark mt-3">
                <div class="container">
                    <a class="navbar-brand" href="#">
                        <img src=
                             width="30" 
                             height="30"></a>
                    <div class="collapse navbar-collapse" 
                         id="navbarSupportedContent">
                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                            <li class="nav-item">
                                <a class="nav-link active" 
                                   aria-current="page" 
                                   href="#">
                                    Home
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Link</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    </div>
    <button class="btn btn-danger m-4" 
            type="button" 
            data-bs-toggle="collapse" 
            data-bs-target=".m-col">
        Toggle both elements
    </button>
</body>
  
</html>


Output:

 

Example 2: The code below demonstrates how we can open multiple accordion tabs using one accordion tab button:

HTML




<!doctype html>
<html lang="en">
  
<head>
    <link href=
          rel="stylesheet">
    <script src=
    </script>
</head>
  
<body class="bg-light">
    <h1 class="mt-3 text-success">GeeksforGeeks</h1>
    <h4>Bootstrap 5 Collapse Multiple targets</h4>
    <div class="accordion" id="accordionExample">
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingOne">
                <button class="accordion-button collapsed" 
                        type="button" 
                        data-bs-toggle="collapse" 
                        data-bs-target="#collapseOne">
                    DSA
                </button>
            </h2>
            <div id="collapseOne" 
                 class="accordion-collapse collapse" 
                 data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    A data structure is defined as a particular way of storing and 
                    organizing data in our devices to use the data efficiently and 
                    effectively.The main idea behind using data structures is to 
                    minimize the time and space complexities.An efficient data 
                    structure takes minimum memory space and requires minimum time 
                    to execute the data.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingTwo">
                <button class="accordion-button collapsed" 
                        type="button" 
                        data-bs-toggle="collapse" 
                        data-bs-target="#collapseTwo">
                    JavaScript
                </button>
            </h2>
            <div id="collapseTwo" 
                 class="accordion-collapse collapse" 
                 aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
                <div class="accordion-body">
                    JavaScript is a lightweight, cross-platform, and interpreted
                    compiled programming language which is also known as the
                    scripting language for webpages.It is well-known for the 
                    development of web pages, many non-browser environments also use it.
                </div>
            </div>
        </div>
        <div class="accordion-item">
            <h2 class="accordion-header" id="headingThree">
                <button class="accordion-button collapsed" 
                        type="button" 
                        data-bs-toggle="collapse" 
                        data-bs-target=".accordion-collapse">
                    This accordion Button toggles the two accordion tabs above.
                </button>
            </h2>
        </div>
    </div>
</body>
  
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/components/collapse/#multiple-targets 



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads