How to automatically close all collapsible elements inside of the accordion when closing the accordion?

22 Jun, 2020
The Collapse plugin provides a quick way of revealing and hiding content. It flip the perceivability of content over program with a couple of classes and Bootstrap 4 JavaScript plugins.
Flipping(toggling) of content requires to connect with the href attribute, or a button with the data-target property. In both cases, the data-toggle=”collapse” is required.
Syntax: 
Link with the href attribute.
<a data-toggle="collapse" href="#collapseExample" ...>
    <!--Write your link name -->
</a>

OR
Button with the data-target property.
<button class="btn btn-primary" type="button" 
    data-toggle="collapse" 
    data-target="#collapseExample" ...>
    <!--Write your button name-->
</button>

 
To display card:
<div class="collapse" id="collapseExample">
    <div class="card card-body">
        <h5 class="card-title"><!--Write title name--></h5>
        <!--Write content here -->
    </div>
</div>

Example:
HTML
<!doctype html><html lang="en">  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width,            initial-scale=1, shrink-to-fit=no">      <!-- Bootstrap CSS -->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"        crossorigin="anonymous">      <!-- Optional JavaScript -->    <!-- jQuery first, then Popper.js,         then Bootstrap JS -->    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"        crossorigin="anonymous">    </script>          <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"        crossorigin="anonymous">    </script>          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"        crossorigin="anonymous">    </script>          <title>        How to automatically close all        collapsible elements inside of         the accordion when closing the        accordion?    </title></head>  <body>    <center>        <h4><a class="text-success"             style="text-decoration: none;" href="#">                Geeksforgeeks            </a>        </h4><br>                  <a class="text-success" data-toggle="collapse"            href="#collapseExample" aria-expanded="false"            aria-controls="collapseExample">            Connect with href        </a>        <br /><br />                  <button class="btn btn-success" type="button"                data-toggle="collapse"                 data-target="#collapseExample"                aria-expanded="false"                 aria-controls="collapseExample">            Button with data-target        </button>          <div class="collapse" id="collapseExample">            <div class="card card-body">                <h5 class="card-title">                    Basic Example                </h5>                                    <p>                    Collapse plugin provides a quick                     way of revealing and hiding content.                    It toggle the visibility of content                    across your program project with a                    few classes and Bootstrap4                    JavaScript plugins.                </p>              </div>        </div>    </center></body>  </html>
Output:
**Note: Here the content is placed at center if you don’t want it then remove <center> tag.
Multiple targets: Multiple <button> or <a> element can display or hide the component in case they reference it with their href or data-target attribute. The <button> or <a> can show and hide multiple elements by referencing them with a jQuery selector in its href or data-target attribute. 
Example:
HTML
<!doctype html><html lang="en">  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width,            initial-scale=1, shrink-to-fit=no">      <!-- Bootstrap CSS -->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"        crossorigin="anonymous">      <!-- Optional JavaScript -->    <!-- jQuery first, then Popper.js,          then Bootstrap JS -->    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"        crossorigin="anonymous">    </script>          <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"        crossorigin="anonymous">    </script>          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"        crossorigin="anonymous">    </script>          <title>Multiple Collapse</title></head>  <body>    <center>        <h4><a class="text-success"             style="text-decoration: none;" href="#">                Geeksforgeeks            </a>        </h4><br>                  <a class="text-success" data-toggle="collapse"             href="#multiCollapseExample1"             aria-expanded="false"            aria-controls="multiCollapseExample1">            Flip first card        </a>                  <button class="btn btn-success" type="button"             data-toggle="collapse"             data-target="#multiCollapseExample2"            aria-expanded="false"             aria-controls="multiCollapseExample2">            Flip second card        </button>          <button class="btn btn-success" type="button"             data-toggle="collapse"             data-target=".multi-collapse"            aria-expanded="false"             aria-controls="multiCollapseExample1                multiCollapseExample2">            Flip third card        </button>                  <div class="row">            <div class="col">                <div class="collapse multi-collapse"                     id="multiCollapseExample1">                    <div class="card card-body text-success">                        <h5 class="card-title">                            Multiple collapse                        </h5>                        Collapse plugin provides a quick                         way of revealing and hiding content.                        It toggle the visibility of content                         across your program project with a                         few classes and Bootstrap4 JavaScript                        plugins.                    </div>                </div>            </div>            <div class="col">                <div class="collapse multi-collapse"                         id="multiCollapseExample2">                    <div class="card card-body text-success">                        <h5 class="card-title">                            Multiple collapse                        </h5>                        Collapse plugin provides a quick way                         of revealing and hiding content.                        It toggle the visibility of content                         across your program project with a                         few classes and Bootstrap4 JavaScript                         plugins.                    </div>                </div>            </div>        </div>    </center></body>  </html>
Output:
Accordion: Utilizing the card component, you’ll be able to extend the default collapse behavior to form an accordion.
Example:
HTML
<!doctype html><html lang="en">  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width,            initial-scale=1, shrink-to-fit=no">      <!-- Bootstrap CSS -->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"        crossorigin="anonymous">      <!-- Optional JavaScript -->    <!-- jQuery first, then Popper.js,         then Bootstrap JS -->    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"        crossorigin="anonymous">    </script>          <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"        crossorigin="anonymous">    </script>          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"        crossorigin="anonymous">    </script>          <title>Accordion</title></head>  <body>    <center>        <h4><a class="text-success"             style="text-decoration: none;" href="#">                Geeksforgeeks            </a>        </h4><br>                  <div id="accordion">            <div class="card">                <div class="card-header text-white                     mb-3 bg-success" id="headingOne">                    <h5 class="mb-0">                        <button class="btn btn-success"                             data-toggle="collapse"                             data-target="#collapseOne"                            aria-expanded="true"                             aria-controls="collapseOne">                            #1MyCollapsible                        </button>                    </h5>                </div>                <div id="collapseOne" class="collapse show"                     aria-labelledby="headingOne"                     data-parent="#accordion">                                          <div class="card-body">                        <b>                            Collapse plugin provides a                             quick way of revealing and                             hiding content. It toggle                             the visibility of content                             across your program project                            with a few classes and                            Bootstrap4 JavaScript plugins.                            Using the card component, you                             can extend the default collapse                            behavior to create an                            accordion.                        </b>                    </div>                </div>            </div>            <div class="card">                <div class="card-header text-white                     mb-3 bg-success" id="headingTwo">                    <h5 class="mb-0">                        <button class="btn btn-success collapsed"                            data-toggle="collapse"                             data-target="#collapseTwo"                            aria-expanded="false"                             aria-controls="collapseTwo">                            #2MyCollapsible                        </button>                    </h5>                </div>                <div id="collapseTwo" class="collapse"                     aria-labelledby="headingTwo"                     data-parent="#accordion">                      <div class="card-body">                        <b>                            Collapse plugin provides a quick                             way of revealing and hiding content.                            It toggle the visibility of content                             across your program project with a                             few classes and Bootstrap4 JavaScript                            plugins. Using the card component,                             you can extend the default collapse                             behavior to create an accordion.                        </b>                    </div>                </div>            </div>            <div class="card">                <div class="card-header text-white                     mb-3 bg-success" id="headingThree">                    <h5 class="mb-0">                        <button class="btn btn-success collapsed"                             data-toggle="collapse"                             data-target="#collapseThree"                            aria-expanded="false"                             aria-controls="collapseThree">                            #3MyCollapsible                        </button>                    </h5>                </div>                <div id="collapseThree" class="collapse"                     aria-labelledby="headingThree"                     data-parent="#accordion">                      <div class="card-body">                        <b>                            Collapse plugin provides a quick                             way of revealing and hiding content.                            It toggle the visibility of content                            across your program project with a                             few classes and Bootstrap4 JavaScript                            plugins. Using the card component,                             you can extend the default collapse                             behavior to create an accordion.                        </b>                    </div>                </div>            </div>        </div>    </center></body>  </html>
Output:
How to automatically close all collapsible elements inside of the accordion when closing the accordion?
Example:
HTML
<!doctype html><html lang="en">  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width,            initial-scale=1, shrink-to-fit=no">      <!-- Bootstrap CSS -->    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"        crossorigin="anonymous">      <!-- Optional JavaScript -->    <!-- jQuery first, then Popper.js,         then Bootstrap JS -->    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"        crossorigin="anonymous">    </script>          <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"        crossorigin="anonymous">    </script>          <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"        crossorigin="anonymous">    </script>    <title>Accordion</title></head>  <body>    <center>        <h4><a class="text-success"             style="text-decoration: none;" href="#">                Geeksforgeeks            </a>        </h4><br>                  <div id="accordion">            <div class="card">                <div class="card-header text-white                     mb-3 bg-success" id="headingOne">                    <h5 class="mb-0">                        <button class="btn btn-success"                             data-toggle="collapse"                             data-target="#collapseOne"                            aria-expanded="true"                             aria-controls="collapseOne">                            #1MyCollapsible                        </button>                    </h5>                </div>                <div id="collapseOne"                     class="main collapse show"                     aria-labelledby="headingOne"                     data-parent="#accordion">                      <div class="card-body">                        <div id="accordionRecommendation">                            <div class="card-header border                                 text-white mb-3 bg-success"                                 id="headingRecommendation">                                  <h5 class="mb-0">                                    <button class=                                        "btn btn-success collapsed"                                         data-toggle="collapse"                                        data-target="#collapseOne1"                                         aria-expanded="false"                                         aria-controls="collapseOne1">                                        Inner #1MyCollapsible                                    </button>                                      <button class="btn btn-success                                         collapsed" data-toggle="collapse"                                        data-target="#collapseTwo1"                                        aria-expanded="false"                                         aria-controls="collapseTwo1">                                        Inner #2MyCollapsible                                    </button>                                      <button class="btn btn-success                                         collapsed" data-toggle="collapse"                                        data-target="#collapseThree1"                                         aria-expanded="false"                                        aria-controls="collapseThree1">                                        Inner #3MyCollapsible                                    </button>                                </h5>                            </div>                              <div class="karte">                                <div id="collapseOne1" class="collapse"                                     aria-labelledby="headingRecommendation"                                    data-parent="#accordionRecommendation">                                    <div class="card-body">                                        <b>Some Content of First One</b>                                    </div>                                </div>                            </div>                              <div class="karte">                                <div id="collapseTwo1" class="collapse"                                     aria-labelledby="headingRecommendation"                                    data-parent="#accordionRecommendation">                                    <div class="card-body">                                        <b>Some Content of First Two</b>                                    </div>                                </div>                            </div>                              <div class="karte">                                <div id="collapseThree1" class="collapse"                                    aria-labelledby="headingRecommendation"                                    data-parent="#accordionRecommendation">                                    <div class="card-body">                                        <b>Some Content of First Three</b>                                    </div>                                </div>                            </div>                        </div>                    </div>                </div>            </div>            <div class="card">                <div class="card-header text-white mb-3                         bg-success" id="headingTwo">                    <h5 class="mb-0">                        <button class="btn btn-success collapsed"                            data-toggle="collapse"                             data-target="#collapseTwo"                            aria-expanded="false"                             aria-controls="collapseTwo">                            #2MyCollapsible                        </button>                    </h5>                </div>                  <div id="collapseTwo" class="collapse"                     aria-labelledby="headingTwo"                     data-parent="#accordion">                      <div class="card-body">                        Collapse plugin provides a quick                         way of revealing and hiding content.                        It toggle the visibility of content                        across your program project with a                         few classes and Bootstrap4 JavaScript                        plugins. Using the card component,                         you can extend the default collapse                        behavior to create an accordion.                    </div>                </div>            </div>              <div class="card">                <div class="card-header text-white                     mb-3 bg-success" id="headingThree">                    <h5 class="mb-0">                        <button class="btn btn-success                            collapsed" data-toggle="collapse"                            data-target="#collapseThree"                            aria-expanded="false"                             aria-controls="collapseThree">                            #3MyCollapsible                        </button>                    </h5>                </div>                <div id="collapseThree" class="collapse"                     aria-labelledby="headingThree"                     data-parent="#accordion">                      <div class="card-body">                        Collapse plugin provides a quick                         way of revealing and hiding content.                        It toggle the visibility of content                        across your program project with a                         few classes and Bootstrap4 JavaScript                        plugins. Using the card component,                         you can extend the default collapse                         behavior to create an accordion.                    </div>                </div>            </div>        </div>    </center></body>  </html>
Output:
Why do we use aria-expanded and aria-controls?
Add aria-expanded to the control component. This quality unequivocally (explicitly) passes on the current state of the collapsible component tied to the control to screen perusers (readers) and comparable assistive technologies. On the off chance that the collapsible component is closed by default, the property on the control component ought to have a esteem of(set) aria-expanded=”false”. In the event that you’ve set the collapsible component to be open by default utilizing the show class, then set aria-expanded=”true” on the control instep. The plugin will consequently flip(toggle) this trait on the control based on whether or not the collapsible component has been opened or closed (by means of JavaScript, or since the client activated another control component too tied to the same collapsible component). On the off chance that the control element’s HTML component isn’t a button (e.g. an <a> or <div>), the attribute role=”button” should be included to the component.
On the off chance that your control component is focusing on a single collapsible component – i.e. the data-target attribute is indicating to an id selector – you ought to include the aria-controls attribute to the control component, containing the id of the collapsible component. Advanced screen perusers and comparative assistive advances(technologies) make utilize of this trait to supply clients with extra alternate routes to explore straightforwardly to the collapsible component itself.
We can use Collapse and Accordion via data attributes or via javascript. 
Through data attributes: The collapse plugin utilizes a number of classes to handle the overwhelming lifting:
.collapse covers up the content
.collapse.show appears the content
.collapsing is included when the transition begins, and expelled when it wraps up.
Add data-toggle=”collapse” and a data-target to the component to naturally allot control of one or more collapsible components. The data-target attribute acknowledges a CSS selector to apply the collapse. Be beyond any doubt to include the class collapse to the collapsible component. On the off chance that you’d like it to default open, include the extra class show.
To include accordion-like gather administration to a collapsible range, include the information attribute data-parent=”#selector”. 
Through JavaScript:
$('.collapse').collapse()

Methods:
.collapse(options): Enacts your content as a collapsible component. Acknowledges an optional alternatives object. Options are parent and toggle. Ex. $(‘#myCollapsible’).collapse({toggle: false})
.collapse(‘toggle’): Flips a collapsible component to appeared or covered up.
.collapse(‘show’): Appears a collapsible component.
.collapse(‘hide’): Covers up a collapsible component.
.collapse(‘dispose’): Devastates an component’s collapse.
Bootstrap-4
Bootstrap-Misc
Picked
Bootstrap
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
Difference between Bootstrap 4 and Bootstrap 5
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
How to set the default value for an HTML <select> element ?