Bootstrap 5 Offcanvas Usage Events
Bootstrap 5 Offcanvas Events fired when interacting with the Bootstrap 5 offcanvas. For example, these events are fired when an off-canvas element is toggled to be visible or hidden.
Bootstrap 5 Offcanvas Usage Events:
- show.bs.offcanvas: It is fired when the show instance method of the dropdown is called.
- shown.bs.offcanvas: It is fired when the offcanvas is completely visible to the user after all the CSS transitions are done.
- hide.bs.offcanvas: It is fired when the hide instance method of the dropdown is called.
- hidden.bs.offcanvas : It is fired when the offcanvas is completely hidden from the user after all the CSS transitions are done.
Syntax:
offcanvasEl.addEventListener(offcanvas_event, callbackFunction);
Let us understand more about this using some examples below.
Example 1: In this example, we will listen for the offcanvas events that get fired when the offcanvas is toggled to be visible.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body class = "m-2" > < h1 class = "text-success" > w3wiki </ h1 > < button data-bs-toggle = "offcanvas" data-bs-target = "#myOffcanvas" class = "btn btn-success" type = "button" > Toggle offcanvas </ button > < div class = "offcanvas offcanvas-start" tabindex = "-1" id = "myOffcanvas" aria-labelledby = "offcanvasExampleLabel" > < div class = "offcanvas-header" > < h5 class = "offcanvas-title" id = "offcanvasExampleLabel" > GFG Offcanvas </ h5 > </ div > < div class = "offcanvas-body" > Welcome to offcanvas GFG!! </ div > < script > const myOffcanvas = document.getElementById('myOffcanvas') myOffcanvas.addEventListener('show.bs.offcanvas', () => { console.log('show instance method fired!'); }) myOffcanvas.addEventListener('shown.bs.offcanvas', () => { console.log('offcanvas element completely visible!'); }) </ script > </ div > </ body > </ html > |
Output:
Example 2: In this example, we will listen for the offcanvas events that get fired when the offcanvas is toggled to be hidden.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body class = "m-2" > < h1 class = "text-success" > w3wiki </ h1 > < button data-bs-toggle = "offcanvas" data-bs-target = "#myOffcanvas" class = "btn btn-success" type = "button" > Toggle offcanvas </ button > < div class = "offcanvas offcanvas-start" tabindex = "-1" id = "myOffcanvas" aria-labelledby = "offcanvasExampleLabel" > < div class = "offcanvas-header" > < h5 class = "offcanvas-title" id = "offcanvasExampleLabel" > GFG Offcanvas </ h5 > </ div > < div class = "offcanvas-body" > Welcome to offcanvas GFG!! </ div > < script > const myOffcanvas = document.getElementById('myOffcanvas') myOffcanvas.addEventListener('hide.bs.offcanvas', () => { console.log('hide instance method fired!'); }) myOffcanvas.addEventListener('hidden.bs.offcanvas', () => { console.log('offcanvas element completely hidden!'); }) </ script > </ div > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/offcanvas/#events
Contact Us