Skip to content
Related Articles

Related Articles

Improve Article

How to expand accordion from URL in Bootstrap?

  • Last Updated : 15 Jan, 2021
Geek Week

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=
        integrity=
"sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
        crossorigin="anonymous" />
  
    <!--jQuery CDN-->
        integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous">
    </script>
      
    <script src=
        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>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :