Collapse Events - HTML CSS Bootstrap

HTML CSS examples for Bootstrap:Accordion

  1. HOME
  2. HTML CSS
  3. Bootstrap
  4. Accordion

Introduction

Bootstrap's collapse class includes few events for hooking into collapse functionality.

Event Description
show.bs.collapse fires when the show instance method is called.
shown.bs.collapse fired when a collapse element has been made visible to the user.
hide.bs.collapse fired when the hide method has been called.
hidden.bs.collapse fired when a collapse element has been hidden from the user.

The following code shows how to Display message to the user when sliding transition of a collapsible element has been fully completed.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Example of Bootstrap 3 Collapse Events</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script type="text/javascript">
$(document).ready(function(){
  $('#myCollapsible').on('hidden.bs.collapse', function(){
    console.log('Collapsible element has been completely closed.');
  });<!-- www.  ja v a  2s. co  m-->
});
</script>
  <style type="text/css">
p {
  background: #F9F9F9;
  border: 1px solid #E1E1E8;
  margin: 10px 0;
  padding: 8px;
}
.bs-example{
  margin: 20px;
}
</style>
 </head>
 <body>
  <div>
   <!-- Trigger Button HTML -->
   <input type="button" class="btn btn-primary" data-toggle="collapse" data-target="#myCollapsible" value="Toggle Button">
   <!-- Collapsible Element HTML -->
   <div id="myCollapsible" class="collapse in">
    <p>This is a test. This is a test. This is a test.This is a test. This is a test. This is a test.This is a test. This is a test. This is a test.</p>
   </div>
  </div>
 </body>
</html>

Related Tutorials