Open In App

Bootstrap 5 Collapse Events

Improve
Improve
Like Article
Like
Save
Share
Report

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
Previous
Next
Share your thoughts in the comments
Similar Reads