How to expand accordion from URL in Bootstrap ?

Last Updated : 23 Feb, 2023

Given an HTML document containing a bootstrap accordion, the task is to expand a particular section of the accordion, based on the query passed in the URL of the webpage.

Approach: This task can be accomplished using the hash property of the URL interface. The hash property of the URL interface is a USVString containing a ‘#’ followed by the fragment identifier of the URL. We can extract this hash using jQuery and toggle the “show” class on the specific accordion section based on the hash string.

Example: In this example, we have a bootstrap accordion with three sections, having ID’s “collapseOne”, “collapseTwo” and “CollapseThree” respectively. To show a specific section of the accordion, we just need to add.

To show the first section, 
https://<page URL>/#collapseOne

To show the second section,
https://<page URL>/#collapseTwo

To show the third section,
https://<page URL>/#collapseThree

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0" /> 
  
    <!--Bootstrap CSS CDN-->
    <link rel="stylesheet" href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity= 
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous" /> 
  
    <!--jQuery CDN-->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity= 
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"> 
    </script> 
      
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity= 
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"> 
    </script> 
      
    <script src= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity= 
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"> 
    </script> 
</head> 
  
<body> 
  
    <!--Accordion-->
    <div class="accordion" id="accordionExample"> 
        <div class="card"> 
            <div class="card-header" id="headingOne"> 
                <h2 class="mb-0"> 
                    <button class="btn btn-link" 
                        type="button" data-toggle="collapse"
                        data-target="#collapseOne"
                        aria-expanded="true" 
                        aria-controls="collapseOne"> 
                        Collapsible Group Item #1 
                    </button> 
                </h2> 
            </div> 
  
            <div id="collapseOne" class="collapse show" 
                aria-labelledby="headingOne" 
                data-parent="#accordionExample"> 
  
                <div class="card-body"> 
                    Bootstrap is a free and open-source tool 
                    collection for creating responsive websites 
                    and web applications. It is the most popular 
                    HTML, CSS, and JavaScript framework for  
                    developing responsive, mobile-first web sites. 
                    Nowadays, the websites are perfect for all  
                    the browsers (IE, Firefox and Chrome) and  
                    for all sizes of screens (Desktop, Tablets, 
                    Phablets, and Phones). All thanks to Bootstrap 
                    developers – Mark Otto and Jacob Thornton of  
                    Twitter, though it was later declared to be  
                    an open-source project. 
                </div> 
            </div> 
        </div> 
  
        <div class="card"> 
            <div class="card-header" id="headingTwo"> 
                <h2 class="mb-0"> 
                    <button class="btn btn-link collapsed"
                        type="button" data-toggle="collapse"
                        data-target="#collapseTwo" 
                        aria-expanded="false" 
                        aria-controls="collapseTwo"> 
                        Collapsible Group Item #2 
                    </button> 
                </h2> 
            </div> 
  
            <div id="collapseTwo" class="collapse" 
                aria-labelledby="headingTwo" 
                data-parent="#accordionExample"> 
                  
                <div class="card-body"> 
                    Bootstrap is a free and open-source tool 
                    collection for creating responsive websites 
                    and web applications. It is the most popular 
                    HTML, CSS, and JavaScript framework for  
                    developing responsive, mobile-first web sites. 
                    Nowadays, the websites are perfect for all  
                    the browsers (IE, Firefox and Chrome) and  
                    for all sizes of screens (Desktop, Tablets, 
                    Phablets, and Phones). All thanks to Bootstrap 
                    developers – Mark Otto and Jacob Thornton of  
                    Twitter, though it was later declared to be  
                    an open-source project. 
                </div> 
            </div> 
        </div> 
          
        <div class="card"> 
            <div class="card-header" id="headingThree"> 
                <h2 class="mb-0"> 
                    <button class="btn btn-link collapsed" 
                        type="button" data-toggle="collapse"
                        data-target="#collapseThree" 
                        aria-expanded="false" 
                        aria-controls="collapseThree"> 
                        Collapsible Group Item #3 
                    </button> 
                </h2> 
            </div> 
  
            <div id="collapseThree" class="collapse" 
                aria-labelledby="headingThree" 
                data-parent="#accordionExample"> 
                  
                <div class="card-body"> 
                    Bootstrap is a free and open-source tool 
                    collection for creating responsive websites 
                    and web applications. It is the most popular 
                    HTML, CSS, and JavaScript framework for  
                    developing responsive, mobile-first web sites. 
                    Nowadays, the websites are perfect for all  
                    the browsers (IE, Firefox and Chrome) and  
                    for all sizes of screens (Desktop, Tablets, 
                    Phablets, and Phones). All thanks to Bootstrap 
                    developers – Mark Otto and Jacob Thornton of  
                    Twitter, though it was later declared to be  
                    an open-source project. 
                </div> 
            </div> 
        </div> 
    </div> 
  
    <script> 
        if (location.hash !== null && location.hash !== "") { 
            $(location.hash + ".collapse").collapse("show"); 
        } 
    </script> 
</body> 
  
</html> 