Bootstrap 5 Offcanvas can be triggered or used using two ways using data attributes and using JavaScript. For using it with JavaScript we need to add a function and use the predefined show() method to trigger the off-canvas from a button or link.
Prerequisite: Bootstrap 5 Offcanvas Usage, and Bootstrap 5 offcanvas usage Methods.
Bootstrap 5 Offcanvas Via JavaScript Used classes and methods: To implement offcanvas using JavaScript an understanding of the different classes and methods in the Bootstrap 5 Offcanvas Usage and Bootstrap 5 Offcanvas Usage Methods is required.
Syntax:
var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas')) var offcanvasList = offcanvasElementList.map(function (offcanvasEl) { return new bootstrap.Offcanvas(offcanvasEl) })
Example 1: This code example shows how to implement the usage of offcanvas 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 Offcanvas Usage Via data JavaScript
</ h4 >
< div class = "container d-flex mb-4 p-4" >
< button class = "btn btn-success m-3" type = "button" id = "trigger-btn" >
This button is able to call an Offcanvas
< br > Using JavaScript < br >
Which is the Right placed offcanvas
</ button >
</ div >
< div class="offcanvas offcanvas-end bg-dark
text-light"
id = "offcanvasRight" >
< div class = "offcanvas-header" >
< h5 class = "offcanvas-title" >
This is the Default offcanvas
triggered with JavaScript.
</ h5 >
< button type = "button" class = "btn-close text-reset bg-light" data-bs-dismiss = "offcanvas" aria-label = "Close" >
</ button >
</ div >
< div class = "offcanvas-body" >
< p >This Offcanvas has the custom
placed offcanvas which is Right.</ p >
< br >
</ div >
</ div >
< script >
//New instance of the collapse element is created
var offcanvasElement = document.getElementById("offcanvasRight");
var offcanvas = new bootstrap.Offcanvas(offcanvasElement);
//The offcanvas element is toggled using the toggle() function
let button = document.getElementById("trigger-btn");
button.addEventListener("click", () => {
return offcanvas.toggle();
;
});
</ script >
</ body >
</ html >
|
Output:
Example 2: The example below demonstrates how we can trigger the offcanvas using JavaScript which triggers a top offcanvas using the offcanvas-top class.
<!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 Offcanvas Usage via JavaScript
</ h4 >
< div class = "container d-flex mb-4 p-4" >
< button class = "btn btn-success m-3" type = "button" id = "trigger-btn" >
This button is able to call an Offcanvas
< br > Using JavaScript
< br > Which is the Top placed offcanvas
</ button >
</ div >
< div class="offcanvas offcanvas-top bg-dark
text-light"
id = "offcanvasTop" >
< div class = "offcanvas-header" >
< h5 class = "offcanvas-title" >
This is the Top offcanvas opened via
JavaScript
</ h5 >
< button type = "button" class = "btn-close text-reset bg-light" data-bs-dismiss = "offcanvas" aria-label = "Close" >
</ button >
</ div >
< div class = "offcanvas-body" >
< p >This offcanvas pops from the top when triggered</ p >
< br >
< img src =
alt = "" >
</ div >
</ div >
< script >
//New instance of the collapse element is created
var offcanvasElement = document.getElementById("offcanvasTop");
var offcanvas = new bootstrap.Offcanvas(offcanvasElement);
//The offcanvas element is toggled using the toggle() function
let button = document.getElementById("trigger-btn");
button.addEventListener("click", () => {
return offcanvas.toggle();
;
});
</ script >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/offcanvas/#via-javascript