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