How to expand accordion from URL in Bootstrap? - GeeksforGeeks

15 Jan, 2021
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>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bootstrap-Misc
HTML-Misc
jQuery-Misc
Picked
Bootstrap
HTML
JQuery
Web Technologies
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?
How to change the background color of the active nav-item?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property