Twitter Bootstrap 2 on collapse event

Question

is there any way to catch when the collapse menu appears (or when collapse button is clicked by user) ?

i'm using standard bootstrap twitter framework and classes.

Solution 1

TWITTER BOOTSTRAP 2

It looks like the plugin is adding the class "in" to the active collapse group. So maybe you could do something like.

if( $('#collapseOne').hasClass('in') ){
..do something
}

EDIT:

Okay, I don't have anyway of testing right now, so these are kind of just guesses. I am sure you could easily determine when a collapse link was clicked by doing this.

$('.accordion-toggle').click(function(){
   console.log('clicked');
});

However if you wanted to know exactly which one was clicked you would probably have to index them.

Solution 2

In bootstrap 3.x, the four events you're looking for are:

show.bs.collapse
shown.bs.collapse
hide.bs.collapse
hidden.bs.collapse

They fire on the data-target DOM element, e.g. for the following mark-up:

<div role="navigation" class="navbar navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="#" class="navbar-brand">Title</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li id="item1"><a href="#item1">Menu Item 1</a></li>
      </ul>
    </div>
  </div>
</div>

You'd listen (in jQuery) via:

$('.navbar-collapse').on('shown.bs.collapse', function() { alert('shown'); });
$('.navbar-collapse').on('hidden.bs.collapse', function() { alert('hidden'); });

Solution 3

Use the "shown" event handler:

$("#accordion").on("shown",function(event){
        collapse_element = event.target;
    });

Refer to: http://twitter.github.com/bootstrap/javascript.html#collapse to see the other events supported

Solution 4

If you want to use easing animation with the changing of the icon you need to do this on show/hide.

In this example, I'm using bootstrap 2.3.2, jQuery 1.8.3, and Font Awesome 3.2.1

HTML:

<div id="accordion" class="accordion">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a data-item-id="{id}" href="#something" data-parent="#accordion"
         data-toggle="collapse" class="accordion-toggle">
       <i class="icon icon-expand-alt"></i> {title}</a>
     </div>
     <div data-item-id="{id}" class="accordion-body collapse" id="something">
       <div class="accordion-inner">
         {Content}
       </div>
     </div>
  </div>
 ... {additional panels}
</div>

js:

$('#accordion').on('show hide', function (e) {
  var oTarget = $(e.target);
  var oIcon = $('i', $('a[data-item-id="' + oTarget.attr('data-item-id') + '"]'));
  oIcon.toggleClass('icon-expand-alt icon-collapse-alt', 200);
 });

View more solutions

Comments

[Robb Sadler]

Unfortunately though I successfully got an accordion with this event working in this fiddle it doesn't seem to want to work in Bootstrap 3.0, and the link provided is now broken. Continuing on the search...

[Pierre]

BS 3.0 has four events show.bs.collapse, shown.bs.collapse, hide.bs.collapse and hidden.bs.collapse

[Brad Pitcher]

The questioner is looking for help with Bootstrap 2, not 3