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 = "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" >w3wiki</ 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 = "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" >w3wiki</ 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
Contact Us