Bootstrap 5 Accordion Always open is used to change the default value of Accordion and change it to always-open accordion where if a tab of it is open then it will stay open until it is toggled to close by eliminating the data-bs-parent attribute with each accordion tab with the .accordion-collapse class.
Bootstrap5 Accordion Always open Classes: No special class is used to implement the always-on setting of the accordion, the only change which is needed is to omit the data-bs-parent attribute.
Syntax:
<div class="accordion" id=" ">
<div class="accordion-item">
<h2 class="accordion-header" id=" ">
...
</h2>
<div id=" " class="accordion-collapse">
<div class="accordion-body">
. . . . .
</div>
</div>
</div>
<div class="accordion-item">...</div>
</div>
Example 1: The code example demonstrates how we can implement an always open simple accordion:
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" />
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<h1 class="m-4 text-success">
GeeksforGeeks
</h1>
<h4 class="ms-4">
Bootstrap 5 Accordion Always open
</h4>
<div class="container">
<div class="accordion"
id="accordionStayOpen">
<div class="accordion-item">
<h2 class="accordion-header"
id="panelsStayOpen-headingOne">
<button class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#alwaysOpenOne">
Data Structures
</button>
</h2>
<div id="alwaysOpenOne"
class="accordion-collapse">
<div class="accordion-body">
<p>
A data structure is a group of data elements that provides
the easiest way to store and perform different actions
on the data of the computer. A data structure is a particular
way of organizing data in a computer so
that it can be used effectively. The idea is to reduce the
space and time complexities of different tasks.
</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header"
id="panelsStayOpen-headingTwo">
<button class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#alwaysOpenTwo">
Algorithms
</button>
</h2>
<div id="alwaysOpenTwo"
class="accordion-collapse collapse">
<div class="accordion-body">
<p>
The word Algorithm means ” A set of finite rules or
instructions to be followed in calculations or other
problem-solving operations ” Or ” A procedure for solving
a mathematical problem in a finite number of steps that
frequently involves recursive operations”.It can be understood
by taking the example of cooking a new recipe.
</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header"
id="panelsStayOpen-headingThree">
<button class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#alwaysOpenThree">
BootStrap 5
</button>
</h2>
<div id="alwaysOpenThree" class="accordion-collapse collapse">
<div class="accordion-body">
<p>
Bootstrap is a free and open-source collection of
CSS and JavaScript/jQuery code used for creating
dynamic websites layout and web applications.
Bootstrap is one of the most popular front-end
frameworks which has really a nice set of
predefined CSS codes. Bootstrap uses different
types of classes to make responsive websites.
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: The code below demonstrates how we can collapse an always-on accordion which is implemented above:
<!DOCTYPE html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" />
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</script>
</head>
<body>
<h1 class="m-4 text-success">
GeeksforGeeks
</h1>
<h4 class="ms-4">
Bootstrap 5 Accordion Always open
</h4>
<div class="container mt-4">
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarToggleExternalContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="container collapse mt-4"
id="navbarToggleExternalContent">
<div class="accordion">
<div class="accordion-item">
<h2 class="accordion-header"
id="panelsStayOpen-headingOne">
<button class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#alwaysOpenOne">
Data Structures
</button>
</h2>
<div id="alwaysOpenOne"
class="accordion-collapse show">
<div class="accordion-body">
<p>
A data structure is a group of data elements that
provides the easiest way to store and perform
different actions on the data of the computer.
A data structure is a particular way of organizing
data in a computer so that it can be used effectively.
The idea is to reduce the space and time complexities
of different tasks.
</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header"
id="panelsStayOpen-headingTwo">
<button class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#alwaysOpenTwo">
Algorithms
</button>
</h2>
<div id="alwaysOpenTwo"
class="accordion-collapse collapse">
<div class="accordion-body">
<p>
The word Algorithm means ” A set of finite rules or
instructions to be followed in calculations or other
problem-solving operations ” Or ” A procedure for
solving a mathematical problem in a finite number
of steps that frequently involves recursive operations”.
It can be understood by taking the example of cooking
a new recipe.
</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header"
id="panelsStayOpen-headingThree">
<button class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#alwaysOpenThree">
BootStrap 5
</button>
</h2>
<div id="alwaysOpenThree"
class="accordion-collapse collapse">
<div class="accordion-body">
<p>
Bootstrap is a free and open-source collection of
CSS and JavaScript/jQuery code used for creating
dynamic websites layout and web applications.
Bootstrap is one of the most popular front-end
frameworks which has really a nice set of
predefined CSS codes. Bootstrap uses different
types of classes to make responsive websites.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/accordion/#always-open