Accordion with one tab always expanded. Bootstrap 5
Question
I have an accordion made with bootstrap 5. How can i make the accordion has always one tab expanded? in other words i dont want tabs to be closed all together, i want one to be open always. How can i do that with plain javascript?
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h1 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
...
</button>
</h1>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h1 class="accordion-header" id="headingTwo">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
...
</button>
</h1>
<div
id="collapseTwo"
class="accordion-collapse collapse"
aria-labelledby="headingTwo"
data-bs-parent="#accordionExample"
>
<div class="accordion-body">
...
</div>
</div>
</div>
I dont want this to happen....
2 answers
solution1
0 2021-05-18 18:58:41
It seems you want to achieve the design and layout style of a bootstrap accordion but doesn't require it's functionality. The best way to achieve this is writing static html/css instead of using a bootstrap component which is there for a different cause.
According to your question you are trying to make something similar to this:
This is hard-coded using bootstrap, so it would be just opened forever. Use a png of a down chevron or use this from fontawesome. I just linked to an image from an external source from a google to be quick.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="acordionThing" style="margin:5rem">
<div class="col d-flex" style="background-color: rgb(185, 185, 185); ">
<div class="col">
<p style=" margin:1rem">
Somekind of a text here.
</p>
</div>
<div style="width:2rem; float:right; margin-right: 2rem;">
<img src="https://img.icons8.com/ios/452/chevron-down.png" style="width: 2rem; margin-top:0.8rem;"">
</div>
</div>
<div class="col d-flex" style="background-color: rgb(218, 218, 218);">
<div class="col">
<p style=" margin:1rem">
Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here.
Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here.
</p>
</div>
</div>
</div>
<div class="acordionThing" style="margin:5rem">
<div class="col d-flex" style="background-color: rgb(185, 185, 185); ">
<div class="col">
<p style=" margin:1rem">
Somekind of a text here.
</p>
</div>
<div style="width:2rem; float:right; margin-right: 2rem;">
<img src="https://img.icons8.com/ios/452/chevron-down.png" style="width: 2rem; margin-top:0.8rem;"">
</div>
</div>
<div class="col d-flex" style="background-color: rgb(218, 218, 218);">
<div class="col">
<p style=" margin:1rem">
Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here.
Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here.
</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
solution2
0 2021-09-26 20:18:47
I struggled with the same problem for a while and was finally able to write a solution for it. I'm not a js master so it's probably not the most elegant solution but it works:
<script>
const accordions = document.querySelectorAll(".accordion-collapse");
let opening = false;
accordions.forEach(function (el) {
el.addEventListener("hide.bs.collapse", (event) => {
if (!opening) {
event.preventDefault();
event.stopPropagation();
} else {
opening = false;
}
});
el.addEventListener("show.bs.collapse", (event) => {
opening = true;
});
});
</script>
Kinda late but it may be useful to others too
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.