---

Search posts under Bootstrap:

---

Collapse Events in Bootstrap

How to use collapse events in Bootstrap?

Collapse events 

Collapse events are used to show the alerts when the click function is pressed

• show.bs.collapse= It shows the alert before opening the content 
• shown.bs.collapse= It shows the alert after opening the content
• hide.bs.collapse=It shows the alert before closing the content
• hidden.bs.collapse=It shows the alert after closing the content

<div class="container">
  <h2>Collapsible Events</h2>
  <button type="button" class="btn btn-success">Show</button>
  <button type="button" class="btn btn-warning">Hide</button> 
    
  <div class="collapse">
   TechFunda is a online tutorial 
  </div>
</div>

<script>
    $(document).ready(function () {
        $(".btn-success").click(function () {
            $(".collapse").collapse('show');
        });
        $(".btn-warning").click(function () {
            $(".collapse").collapse('hide');
        });
        $(".collapse").on('show.bs.collapse', function () {
            alert('The collapsible content is about to be shown.');
        });
        $(".collapse").on('shown.bs.collapse', function () {
            alert('The collapsible content is now fully shown.');
        });
        $(".collapse").on('hide.bs.collapse', function () {
            alert('The collapsible content is about to be hidden.');
        });
        $(".collapse").on('hidden.bs.collapse', function () {
            alert('The collapsible content is now hidden.');
        });
    });
</script>

• In the above code snippet we have defined the collapse function to display the alert, we have taken two buttons with two different classes btn-success and btn-warning
• In the next line we have div element with class value as collapse
• In the next line we have script function to define the content by using btn-success and btn-warning to show and hide the content, we have  different events to show the alert
• .on('show.bs.collapse', function ()) -It displays the alert before opening the content
• .on('shown.bs.collapse', function()) - It displays the alert after opening the content
• .on('hide.bs.collapse', function()) -It displays the alert before closing the content
• .on('hidden.bs.collapse', function()) - It displays the alert after closing the content

output