Open In App

Bootstrap 5 Offcanvas Usage Events

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Offcanvas Events fired when interacting with the Bootstrap 5 offcanvas. For example, these events are fired when an off-canvas element is toggled to be visible or hidden.

Bootstrap 5 Offcanvas Usage Events:

  • show.bs.offcanvas: It is fired when the show instance method of the dropdown is called. 
  • shown.bs.offcanvas: It is fired when the offcanvas is completely visible to the user after all the CSS transitions are done.
  • hide.bs.offcanvas: It is fired when the hide instance method of the dropdown is called.
  • hidden.bs.offcanvas : It is fired when the offcanvas is completely hidden from the user after all the CSS transitions are done.

Syntax:

offcanvasEl.addEventListener(offcanvas_event, callbackFunction);

Let us understand more about this using some examples below.

Example 1: In this example, we will listen for the offcanvas events that get fired when the offcanvas is toggled to be 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>
    <button data-bs-toggle="offcanvas" 
            data-bs-target="#myOffcanvas" 
            class="btn btn-success" 
            type="button">
        Toggle offcanvas
    </button>
  
    <div class="offcanvas offcanvas-start"
         tabindex="-1"
         id="myOffcanvas" 
         aria-labelledby="offcanvasExampleLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" 
                id="offcanvasExampleLabel">
                GFG Offcanvas
            </h5>
        </div>
        <div class="offcanvas-body">
            Welcome to offcanvas GFG!!
        </div>
  
        <script>
            const myOffcanvas = 
                document.getElementById('myOffcanvas')
              
            myOffcanvas.addEventListener('show.bs.offcanvas', () => {
                console.log('show instance method fired!');
            })
              
            myOffcanvas.addEventListener('shown.bs.offcanvas', () => {
                console.log('offcanvas element completely visible!');
            })
        </script>
    </div>
</body>
  
</html>


Output:

 

Example 2: In this example, we will listen for the offcanvas events that get fired when the offcanvas is toggled to be hidden.

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>
    <button data-bs-toggle="offcanvas" 
            data-bs-target="#myOffcanvas" 
            class="btn btn-success" 
            type="button">
        Toggle offcanvas
    </button>
        
    <div class="offcanvas offcanvas-start" 
         tabindex="-1" id="myOffcanvas" 
           aria-labelledby="offcanvasExampleLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" 
                id="offcanvasExampleLabel">
                GFG Offcanvas
            </h5>
        </div>
        <div class="offcanvas-body">
            Welcome to offcanvas GFG!!
        </div>
  
        <script>
            const myOffcanvas = 
                document.getElementById('myOffcanvas')
  
            myOffcanvas.addEventListener('hide.bs.offcanvas', () => {
                console.log('hide instance method fired!');
            })
  
            myOffcanvas.addEventListener('hidden.bs.offcanvas', () => {
                console.log('offcanvas element completely hidden!');
            })
       </script>
    </div>
</body>
  
</html>


Output:

 

Reference: https://getbootstrap.com/docs/5.0/components/offcanvas/#events



Last Updated : 14 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads