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.

Noncooperation

You want to catch the collapse event on your whole document or just a section/specific menu? – Marroquin

Answer 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.

Carniola

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

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

Reason

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

Answer 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

Rockbound

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... – Ethanol

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

Bobcat