Bootstrap 5 Offcanvas Usage Via JavaScript
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.
HTML
<!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" > w3wiki </ 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.
HTML
<!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" > w3wiki </ 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 = "https://media.w3wiki.net/wp-content/cdn-uploads/gfg_200x200-min.png" 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
Contact Us