Binding to Collapse event in Twitter Bootstrap 3

Question

Assuming that I have a Bootstrap Collapse:

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Which element should I bind with for the following JavaScript:

$("WhichSelectorGoesHere").on('hidden.bs.collapse', function () {})

Is it possible to bind all panels by class?

Unfortunately there is no #myCollapsible in the example in the documentation.

Answer 1

When the documentation lists the available events, it's just a promise that it will always raise each particular event at a particular time.

For example, hidden.bs.collapse will be raised whenever:

a collapsed element has been hidden from the user.

---

Whether or not anybody's listening to that event hasn't yet come into play.

To leverage this, or any other, event, we can use jQuery's .on() method to attach listeners on particular html elements to see if they raise particular events.

Where we add the listener depends on where the event is going to be raised and when we want to capture it.

Simple Example:

Let's say you have the basic HTML structure for an Accordion control:

<div class="panel-group" id="accordion">   <div class="panel panel-default" id="panel1"><!--...--></div>   <div class="panel panel-default" id="panel2"><!--...--></div>   <div class="panel panel-default" id="panel3"><!--...--></div> </div> 

In this case, each panel class is going to raise this event. So if want to capture it there, we just use the jQuery class selector to attach listeners to all the .panel objects like so:

$('.panel').on('hidden.bs.collapse', function (e) {     alert('Event fired on #' + e.currentTarget.id); }) 

jsFiddle

---

But Wait There's More...

In HTML, events will bubble from the innermost element to the outermost element if unhandled. So events raised for each individual .panel, can also be handled by the entire .panel-group (or even the body element as they'll eventually work their way up there).

In the bootstrap examples page, they are using the id selector for the entire panel-group, which happens to be #myCollapsible, but in our case is #accordion. If we want to handle the event there, we can simply change the jQuery selector as follows:

$('#accordion').on('hidden.bs.collapse', function (e) {     alert('Event fired on #' + e.currentTarget.id); }) 

Answer 2

Sorry for answering such an old question but I truly hope my input helps someone else.

I found this question because I needed to know how to get the id of the .panel that was subject to the event that was firing.

@KyleMit was very close to the answer I needed but not quite.

This:

$('.panel').on('hidden.bs.collapse', function (e) {     alert('Event fired on #' + e.currentTarget.id); }) 

does not fire the alert

This:

$('#accordion').on('hidden.bs.collapse', function (e) {     alert('Event fired on #' + e.currentTarget.id); }) 

fires the alert with is #accordion which we do not need to get because we already know it to bind the #accordion to in the first place.

So to get the id of the .panel element that is being hidden you would use e.target.id instead of e.currentTarget.id. Like this:

$('#accordion').on('hidden.bs.collapse', function (e) {     alert('Event fired on #' + e.target.id); }) 

Answer 3

Bootstrap's collapse class exposes a few events for hooking into collapse functionality:

https://getbootstrap.com/docs/3.3/javascript/#collapse-events