Binding to Collapse event in Twitter Bootstrap 3

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);
})

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);
})