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