<!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 Collapse Methods</
strong
>
<
br
>
<
button
type
=
"button"
id
=
"toggleButton"
>
Toggle Collapse Element
</
button
>
<
button
type
=
"button"
id
=
"disposeButton"
>
Dispose Collapse Element
</
button
>
<
br
><
br
>
<
div
id
=
"example1"
>
<
div
class
=
"card card-body"
>
Some placeholder content for the first collapse
component of this multi-collapse example.
This panel is hidden by default but revealed
when the user activates the relevant trigger.
</
div
>
</
div
>
<
script
>
// We will first get collapsible element by ID
const myCollapse = document.getElementById('example1')
// We will create collapse object
// so that we can access the methods
const bsCollapse = new bootstrap.Collapse(myCollapse)
// We will get the buttons that call the collapse methods
const toggleButton = document.getElementById('toggleButton')
const disposeButton = document.getElementById('disposeButton')
toggleButton.addEventListener('click', () => {
// we will toggle the collapsible element
bsCollapse.toggle()
})
disposeButton.addEventListener('click', () => {
// we will dispose the collapsible element
bsCollapse.dispose()
})
</
script
>
</
body
>
</
html
>