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:
<!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:
Example 2: The code example below demonstrates how we can use the hide() and show() methods to use the collapse via JavaScript:
<!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:
Reference: https://getbootstrap.com/docs/5.0/components/collapse/#via-javascript