Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Expand Accordion from URL in Bootstrap
Bootstrap is a popular open?source framework for building responsive and mobile?first websites. By offering a selection of pre?made design elements and layout components, this framework makes it simple for developers to produce standardised and expert?looking web pages. Forms, buttons, navigation, and typography are a few of these.
To achieve expandable accordion, we will use hash property of URL interface often called USVString which contains ?#' followed by the identifier URL.
Syntax
<a data-bs-toggle="collapse" href="<url>" role="button" aria-expanded="false" aria-controls="collapseExample">
....
</a>
The <url> must be the directed url followed by the id of the collapsible attribute, to control toggling of that particular section using the collapse class of bootstrap.
Example 1
Here we have two identifiers namely #personalDetials and #contactDetails. The USVString is bound to href attribute of anchor tag, which points to id attribute of div to toggle collapse class of accordion data upon click.
Algorithm
Step 1 :Import bootstrap JS and CSS from CDN using <link> and <script> tag.
Step 2 :Define hashtag url inside href attribute of anchor tag.
Step 3 :Give the same id to the div tag as hashtag url that needs to be collapsed in accordion.
Step 4 :Define the class that's needed to be toggled in data?bs?toggle attribute of anchor tag which in our case is "collapse" class.
Step 5 :Add script to toggle the classes inside a script tag.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
crossorigin="anonymous">
</script>
<!--Bootstrap CSS CDN-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous">
<!--Bootstrap JS CDN-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
crossorigin="anonymous"></script>
</head>
<body>
<div class="accordion container mt-4" id="accordionExample">
<div class="accordion-item px-4 py-3">
<h3 class="accordion-header">
<a data-bs-toggle="collapse" href="#collapseOne" role="button" aria-expanded="false"
aria-controls="collapseExample">
Personal Detials
</a>
</h3>
<div id="collapseOne" class="accordion-collapse collapse show" 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 px-4 py-3">
<h3 class="accordion-header">
<a data-bs-toggle="collapse" href="#contactDetails" role="button" aria-expanded="false"
aria-controls="collapseExample">
Contact Details
</a>
</h3>
<div id="contactDetails" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p><strong>Website: </strong>www.tutorialspoint.com</p>
<p><strong>Instagram: </strong>https://www.instagram.com/tutorialspoint_/</p>
<p><strong>Twitter: </strong>https://twitter.com/tutorialspoint</p>
</div>
</div>
</div>
</div>
<script>
if (location.hash !== null && location.hash !== "") {
$(location.hash + ".collapse").collapse("show");
}
</script>
</body>
</html>
Example 2
In this example, we have three identifiers namely #collapseOne, #CollapseTwo and #collapseThree. These identifiers will be used to trigger accordion when respective sections are clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
crossorigin="anonymous">
</script>
<!--Bootstrap CSS CDN-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous">
<!--Bootstrap JS CDN-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
crossorigin="anonymous"></script>
</head>
<body>
<div class="accordion" id="myAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
data-bs-target="#collapseOne">1. What is HTML?</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
<div class="card-body">
<p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing
the structure of web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/"
target="_blank">Learn more.</a></p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button type="button" class="accordion-button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo">2. What is Bootstrap?</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse show" data-bs-parent="#myAccordion">
<div class="card-body">
<p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web
development. It is a collection of CSS and HTML conventions. <a
href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn
more.</a></p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse"
data-bs-target="#collapseThree">3. What is CSS?</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
<div class="card-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a
given HTML element such as colors, backgrounds, fonts etc. <a
href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
</div>
</div>
</div>
</div>
<script>
if (location.hash !== null && location.hash !== "") {
$(location.hash + ".collapse").collapse("show");
}
</script>
</body>
</html>
Conclusion
Expansion of accordion from URL is very useful for websites with long pages or that contains multiple sections, as it allows users to directly navigate to the content without having to scroll or search. It also improves website's accessibility especially for users with visual impairments who find it difficult to navigate to specific content.
In order to use this functionality, one will need to write a unique script that analyses URLs and causes the relevant accordion element to expand. This may be done by using JavaScript and jQuery, which can recognise the URL parameters and adjust the accordion as necessary.
965 Views
