How to Open Bootstrap Accordion using Anchor Element ?

Last Updated : 01 Aug, 2024

In this article, we will learn how to go to anchor and open a Bootstrap accordion at the same time. This can be utilized by using JavaScript and jQuery for handling the click event.

Accordion is one of the Bootstrap components. Accordion provides collapsable content sections on a webpage. The main purpose of this article is to have a link that when clicked, not only scrolls to a specific anchor on the page but also opens a Bootstrap accordion panel associated with it. This provides users a facility to directly navigate to a specific section of the page and expand the corresponding accordion panel.

Steps to create a link that navigates that open a Bootstrap accordion at the same time

Step 1: Include Bootstrap(V 5.3.0) and JQuery: Inside your HTML file include the following link inside the <head> tag to use Bootstrap compiled CSS.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">

Include the following scripts inside your HTML file's <body> tag to include Bootstrap's compiled JavaScript and JQuery respectively.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Approach:

Using jQuery: The "collapse()" method is a built-in method provided by jQuery that is used to control the collapsing behavior of the elements. Here this method is called on the "$('accordion')" which is the jQuery element selector. In our case, we're selecting <div> element with the class "accordion". Also, we've passed "show" as a parameter to the "collapse" method. This "show" class is responsible for the expansion of the accordion body. Therefore we manipulate it to expand and collapse the accordion element.

Syntax

$('#accordion').collapse('show');

Example 1: In this example, we'll create two accordion items and two anchor tags for both items respectively. In this example, we'll be using JavaScript to include the feature of expanding accordion items when an anchor is clicked.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Accordion and Anchor</title>
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" 
          crossorigin="anonymous">
</head>

<body>

    <div class="container py-5" style="width: 30%;">
        <h1 style="color: green;">GeeksForGeeks</h1>

        <!-- Accordion -->
        <div class="accordion" id="accordion">
            <div class="accordion-item">
                <h2 class="accordion-header" id="section1">
                    <button class="accordion-button collapsed" 
                            type="button" 
                            data-bs-toggle="collapse"
                            data-bs-target="#collapse1" 
                            aria-expanded="false" 
                            aria-controls="collapse1">
                        Section 1
                    </button>
                </h2>
                <div id="collapse1" 
                     class="accordion-collapse collapse" 
                     aria-labelledby="section1"
                     data-bs-parent="#accordion">
                    <div class="accordion-body">
                        Content for section 1.
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header" id="section2">
                    <button class="accordion-button collapsed" 
                            type="button" 
                            data-bs-toggle="collapse"
                            data-bs-target="#collapse2" 
                            aria-expanded="false" 
                            aria-controls="collapse2">
                        Section 2
                    </button>
                </h2>
                <div id="collapse2" class="accordion-collapse collapse" 
                     aria-labelledby="section2"
                     data-bs-parent="#accordion">
                    <div class="accordion-body">
                        Content for section 2.
                    </div>
                </div>
            </div>
        </div>

        <!-- Anchor links -->
        <nav class="mt-3">
            <ul>
                <li><a href="#section1" 
                       data-bs-toggle="collapse" 
                       data-bs-target="#collapse1">
                          Open Accordion Panel 1
                      </a>
                </li>
                <li><a href="#section2" 
                       data-bs-toggle="collapse" 
                       data-bs-target="#collapse2">
                          Open Accordion Panel 2
                      </a>
                </li>
            </ul>
        </nav>
    </div>
    <script>
        // Scroll to anchor and open accordion panel
        document.querySelectorAll
        ('a[data-bs-toggle="collapse"]').forEach(function (link) {
            link.addEventListener('click', function (event) {
                event.preventDefault();
                let target = 
                    document.querySelector(this.getAttribute('href'));
                let accordion = 
                    document.querySelector(this.getAttribute('data-bs-target'));

                $('html, body').animate({
                    scrollTop: $(target).offset().top
                }, 500);

                $(accordion).collapse('show');
            });
        });
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
            integrity=
"sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
            crossorigin="anonymous">
      </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>

</html>

OUTPUT:

In the above example, we used anchor links to scroll to a specific section and expand it. The anchor links have a "href" attribute which we have set to section Id. We also set the attribute "data-bs-target" to the Id of the accordion body. Inside the JavaScript, we created an event listener that listens to the click event. When the anchor is clicked it uses jQuery's animate function to scroll to the target section and then uses the "collapse" function to expand the accordion item.

Example 2: In this example, we'll integrate the Bootstrap drop-down to group the anchor links. The function is the same as above but the main purpose of this example is to show how we can use this feature in various ways.