<!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
>