Open In App

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

Improve
Improve
Like Article
Like
Save
Share
Report

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=
        integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
        crossorigin="anonymous">
  
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, 
        then Bootstrap JS -->
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
      
    <script src=
        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=
        integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
        crossorigin="anonymous">
  
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, 
         then Bootstrap JS -->
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
      
    <script src=
        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=
        integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
        crossorigin="anonymous">
  
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, 
        then Bootstrap JS -->
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
      
    <script src=
        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=
        integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
        crossorigin="anonymous">
  
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, 
        then Bootstrap JS -->
        integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous">
    </script>
      
        integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous">
    </script>
      
    <script src=
        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.


Last Updated : 22 Jun, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads