Bootstrap 5 Collapse Via JavaScript
Last Updated :
10 Feb, 2023
Bootstrap 5 Collapse can be triggered using two ways using data attributes and using JavaScript. For using it with JavaScript, a new Bootstrap collapse object needs to be created. The show() and hide() predefined methods to attain basic handling of the collapse element via JavaScript.
Prerequisite: Bootstrap 5 Collapse Usage, Bootstrap 5 Collapse Methods.
Bootstrap 5 Collapse Via JavaScript Used classes and methods: To implement collapse using JavaScript an understanding of the different classes and methods in the Bootstrap 5 Collapse Usage and Bootstrap 5 Collapse Methods is required.
Syntax:
var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
return new bootstrap.Collapse(collapseEl)
})
Example 1: The code example below demonstrates how we can use the collapse function via JavaScript and use the toggle() method to handle the collapse:
HTML
<!doctype html>
<html lang="en">
<head>
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<h1 class="m-4 text-success">
GeeksforGeeks
</h1>
<h4 class="ms-4">
Bootstrap 5 Collapse Usage Via data JavaScript</h4>
<div class="container d-flex flex-column m-4">
<button class="btn btn-success w-50 mb-4"
type="button" id="trigger-btn">
Toggle the Collapse Card
</button>
<div class="collapse card" id="collapseExample">
<div class="card-body">
<h5 class="card-title">
This is a Collapsible Card
</h5>
<p class="card-text">
This card is toggled using the button above
and the <strong>toggle()</strong>
function is used.
</p>
</div>
</div>
</div>
<script>
//New instance of the collapse element is created
var element = document.getElementById("collapseExample");
var myCollapse = new bootstrap.Collapse(element);
//The collapse element is toggled using the toggle() function
var btn = document.getElementById("trigger-btn");
btn.addEventListener("click", function(){
myCollapse.toggle();
});
</script>
</body>
</html>
|
Output:
Bootstrap 5 Collapse Via JavaScript
Example 2: The code example below demonstrates how we can use the hide() and show() methods to use the collapse via JavaScript:
HTML
<!doctype html>
<html lang="en">
<head>
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<h1 class="m-4 text-success">
GeeksforGeeks</h1>
<h4 class="ms-4">
Bootstrap 5 Collapse Usage Via data JavaScript
</h4>
<div class="container d-flex flex-row m-4">
<button class="btn btn-primary w-50 mb-4"
type="button" id="show-btn">
Show the Collapse Alert
</button>
<button class="btn btn-danger w-50 ms-5 mb-4"
type="button" id="hide-btn">
Hide the Collapse Alert
</button>
</div>
<div class="container collapse fade alert alert-dark"
role="alert" id="collapseExample">
This is a collapsible of alert and the above buttons
shows and hides the alert respectively.
</div>
<script>
//New instance of the collapse element is created
var element = document.getElementById("collapseExample");
var myCollapse = new bootstrap.Collapse(element);
//The collapse element is opened using the show() function
var btnShow = document.getElementById("show-btn");
btnShow.addEventListener("click", function(){
myCollapse.show();
});
//The collapse element is closed using the hide() function
var btnHide = document.getElementById("hide-btn");
btnHide.addEventListener("click", function(){
myCollapse.hide();
});
</script>
</body>
</html>
|
Output:
Bootstrap 5 Collapse Usage Via data JavaScript
Reference: https://getbootstrap.com/docs/5.0/components/collapse/#via-javascript
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...