Bootstrap > Collapse

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

 Views: 283 | Post Order: 50



Write for us