In this article, we will learn about the Bootstrap 5 Collapse Events fired when interacting with the Bootstrap 5 Collapse element. Bootstrap 5 Collapse component is useful for toggling the visibility of a particular content on a webpage.
Bootstrap 5 Collapse Events
- show.bs.collapse: It is fired as soon as the show() method of the instance is called.
- shown.bs.collapse: It is fired when the collapse element is completely visible after all the CSS transitions are done.
- hide.bs.collapse: It is fired as soon as the hide() method of the instance is called.
- hidden.bs.collapse: It is fired when the collapse element is completely hidden after all the CSS transitions are done.
Syntax:
let myCollapsibleEl = document.getElementById('myCollapsible')
myCollapsibleEl.addEventListener('collapse_event', function () {
....
})
Let us understand more about this using some examples below.
Example 1: In this example, we will listen for the collapse events, show.bs.collapse, and shown.bs.collapse, gets fired when a collapse is toggled visible.
<!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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body class="m-2">
<h1 class="text-success">GeeksforGeeks</h1>
<h3>Bootstrap 5 Collapse event</h3>
<button type="button" data-bs-toggle="collapse"
data-bs-target="#collapseExample">
Collapse element GFG
</button>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component.
This panel is hidden by default but revealed when
the user activates the relevant trigger.
</div>
</div>
<script>
const collapse = document.getElementById('collapseExample')
collapse.addEventListener('show.bs.collapse', () => {
console.log('show instance method called!');
})
collapse.addEventListener('shown.bs.collapse', () => {
console.log('collapse element completely visible!');
})
</script>
</body>
</html>
Output:
Example 2: In this example, we will listen for the collapse events, hide.bs.collapse, and hidden.bs.collapse, which gets fired when a collapse is closed.
<!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=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body class="m-2">
<h1 class="text-success">GeeksforGeeks</h1>
<h3>Bootstrap 5 Collapse event</h3>
<button type="button" data-bs-toggle="collapse"
data-bs-target="#collapseExample">
Collapse element GFG
</button>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component.
This panel is hidden by default but revealed when
the user activates the relevant trigger.
</div>
</div>
<script>
const collapse = document.getElementById('collapseExample')
collapse.addEventListener('hide.bs.collapse', () => {
console.log('hide instance method called!');
})
collapse.addEventListener('hidden.bs.collapse', () => {
console.log('collapse element completely hidden!');
})
</script>
</body>
</html>
Output:
Reference: https://getbootstrap.com/docs/5.0/components/collapse/#events