Bootstrap 5 Collapse Events
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:
var 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.
HTML
<!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 >
< 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.
HTML
<!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 >
< 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
Last Updated :
19 Dec, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...