Article Categories

Selected Reading

How to Expand Accordion from URL in Bootstrap?

HTML Bootstrap Front End Technology

Bootstrap accordion components can be expanded directly from URL parameters using hash identifiers. This technique allows users to navigate directly to specific accordion sections by including the section ID in the URL (e.g., page.html#section1). When the page loads, JavaScript detects the hash and automatically expands the corresponding accordion panel.

Syntax

Following is the basic syntax for creating an expandable accordion with URL hash support

<a data-bs-toggle="collapse" href="#sectionId" role="button" aria-expanded="false" aria-controls="sectionId">
   Section Title
</a>
<div id="sectionId" class="accordion-collapse collapse">
   Content here
</div>

The href attribute contains the hash identifier that matches the id of the collapsible div. JavaScript then checks location.hash to expand the correct section on page load.

JavaScript for URL Hash Detection

Following JavaScript code detects the URL hash and expands the corresponding accordion section

if (location.hash !== null && location.hash !== "") {
   $(location.hash + ".collapse").collapse("show");
}

This script checks if a hash exists in the URL, then uses jQuery to find the matching element and expand it using Bootstrap's collapse("show") method.

Using Anchor Links for Accordion Expansion

The following example demonstrates how to create an accordion that can be expanded using URL hash identifiers. Each accordion section has a unique ID that can be referenced in the URL.

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Bootstrap Accordion with URL Hash</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <div class="container">
      <h2>Company Information</h2>
      <p>Click the links to expand sections: 
         <a href="#personalDetails">Personal Details</a> | 
         <a href="#contactDetails">Contact Details</a>
      </p>
      
      <div class="accordion" id="accordionExample">
         <div class="accordion-item">
            <h3 class="accordion-header">
               <a class="accordion-button collapsed" data-bs-toggle="collapse" href="#personalDetails" role="button" aria-expanded="false" aria-controls="personalDetails">
                  Personal Details
               </a>
            </h3>
            <div id="personalDetails" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
               <div class="accordion-body">
                  <p><strong>Name:</strong> TutorialsPoint</p>
                  <p><strong>Motto:</strong> Simply Easy Learning at your fingertips</p>
                  <p><strong>About:</strong> Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects.</p>
               </div>
            </div>
         </div>
         
         <div class="accordion-item">
            <h3 class="accordion-header">
               <a class="accordion-button collapsed" data-bs-toggle="collapse" href="#contactDetails" role="button" aria-expanded="false" aria-controls="contactDetails">
                  Contact Details
               </a>
            </h3>
            <div id="contactDetails" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
               <div class="accordion-body">
                  <p><strong>Website:</strong> www.tutorialspoint.com</p>
                  <p><strong>Email:</strong> contact@tutorialspoint.com</p>
                  <p><strong>Phone:</strong> +1-234-567-8900</p>
               </div>
            </div>
         </div>
      </div>
   </div>
   
   <script>
      // Expand accordion based on URL hash
      if (location.hash !== null && location.hash !== "") {
         $(location.hash + ".collapse").collapse("show");
      }
   </script>
</body>
</html>

The script automatically detects URL hashes like #personalDetails or #contactDetails and expands the corresponding accordion section. Users can bookmark specific sections or share direct links to expanded content.

Using Button Elements for FAQ Accordion

The following example shows a more traditional accordion structure using buttons instead of anchor links, while still supporting URL hash expansion.

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>FAQ Accordion with URL Hash</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <div class="container">
      <h2>Frequently Asked Questions</h2>
      <p>Direct links: 
         <a href="#htmlQuestion">HTML</a> | 
         <a href="#bootstrapQuestion">Bootstrap</a> | 
         <a href="#cssQuestion">CSS</a>
      </p>
      
      <div class="accordion" id="faqAccordion">
         <div class="accordion-item">
            <h2 class="accordion-header">
               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#htmlQuestion" aria-expanded="false" aria-controls="htmlQuestion">
                  What is HTML?
               </button>
            </h2>
            <div id="htmlQuestion" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
               <div class="accordion-body">
                  HTML stands for HyperText Markup Language. It is the standard markup language for creating web pages and web applications. HTML describes the structure and content of web pages using elements and tags.
               </div>
            </div>
         </div>
         
         <div class="accordion-item">
            <h2 class="accordion-header">
               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#bootstrapQuestion" aria-expanded="false" aria-controls="bootstrapQuestion">
                  What is Bootstrap?
               </button>
            </h2>
            <div id="bootstrapQuestion" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
               <div class="accordion-body">
                  Bootstrap is a popular CSS framework for building responsive and mobile-first websites. It provides pre-built components, utilities, and a grid system to speed up web development.
               </div>
            </div>
         </div>
         
         <div class="accordion-item">
            <h2 class="accordion-header">
               <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#cssQuestion" aria-expanded="false" aria-controls="cssQuestion">
                  What is CSS?
               </button>
            </h2>
            <div id="cssQuestion" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
               <div class="accordion-body">
                  CSS stands for Cascading Style Sheets. It is used to control the presentation, formatting, and layout of HTML elements. CSS allows you to separate content from design.
               </div>
            </div>
         </div>
      </div>
   </div>
   
   <script>
      // Expand accordion based on URL hash
      if (location.hash !== null && location.hash !== "") {
         var targetId = location.hash.substring(1);
         var targetElement = document.getElementById(targetId);
         if (targetElement && targetElement.classList.contains('collapse')) {
            var bsCollapse = new bootstrap.Collapse(targetElement);
            bsCollapse.show();
         }
      }
   </script>
</body>
</html>

This example uses Bootstrap's native JavaScript API instead of jQuery. The script creates a new bootstrap.Collapse instance and calls the show() method to expand the target accordion section.

Implementation Steps

To implement URL hash expansion for Bootstrap accordions, follow these steps

Step 1 Include Bootstrap CSS and JavaScript files via CDN links in your HTML head section.
Step 2 Create accordion structure with unique IDs for each collapsible section.
Step 3 Add hash detection script that checks location.hash when the page loads.
Step 4 Use Bootstrap's collapse API to programmatically expand the matching section.
Step 5 &minus

Jaisshree

Updated on: 2026-03-16T21:38:54+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next

Article Categories

How to Expand Accordion from URL in Bootstrap?

Syntax

JavaScript for URL Hash Detection

Using Anchor Links for Accordion Expansion

Example

Using Button Elements for FAQ Accordion

Example

Implementation Steps

Learn More in Our Tutorials

Kickstart Your Career