Bootstrap 5 Offcanvas methods are used to control the visibility of the offcanvas element, manually. For example, they can be used to show, hide, or toggle the Offcanvas element manually.
Bootstrap 5 Offcanvas Usage Methods:
- toggle: It is used to toggle an offcanvas element’s visibility.
- show: It is used to manually show an offcanvas element.
- hide: It is used to manually hide an offcanvas element.
- getInstance: It is used to get the instance of an offcanvas element.
- getOrCreateInstance: It is used to get the instance of an offcanvas element, if an offcanvas element existed, or create one if it wasn’t initialized.
Syntax:
offcanvas.offcanvas_method()
Example 1: In this example, we will use “show” and “hide” offcanvas methods to show and hide the offcanvas element manually, with the click of buttons.
<!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 =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" >
</ script >
</ head >
< body class = "m-2" >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< strong >Bootstrap 5 Offcanvas Usage Methods</ strong >
< br >
< button id = "show" class = "btn btn-success" type = "button" >
Show 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 >
< button id = "hide" class = "btn btn-success" type = "button" >
Hide offcanvas
</ button >
</ div >
< div class = "offcanvas-body" >
Welcome to offcanvas GFG!!
</ div >
< script >
const myOffcanvas = document.getElementById('myOffcanvas')
const bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
const showBtn = document.getElementById('show')
const hideBtn = document.getElementById('hide')
showBtn.addEventListener('click', () => {
bsOffcanvas.show()
})
hideBtn.addEventListener('click', () => {
bsOffcanvas.hide()
})
</ script >
</ div >
</ body >
</ html >
|
Output:
Example 2: In this example, we will use the “toggle” Offcanvas method to toggle (show/hide) the offcanvas element’s visibility, manually, with the click of buttons.
<!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 =
rel = "stylesheet" integrity =
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" >
< script src =
integrity =
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" >
</ script >
</ head >
< body class = "m-2" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
< br >
< strong >Bootstrap 5 Offcanvas Usage Methods</ strong >
< button id = "toggle1" 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 >
< button id = "toggle2" class = "btn btn-success"
type = "button" >
Toggle offcanvas
</ button >
</ div >
< div class = "offcanvas-body" >
Welcome to offcanvas GFG!!
</ div >
< script >
const myOffcanvas = document.getElementById('myOffcanvas')
const bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
const toggleBtn1 = document.getElementById('toggle1')
const toggleBtn2 = document.getElementById('toggle2')
toggleBtn1.addEventListener('click', () => {
bsOffcanvas.toggle()
})
toggleBtn2.addEventListener('click', () => {
bsOffcanvas.toggle()
})
</ script >
</ div >
</ body >
</ html >
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/offcanvas/#methods