So, there are some events in my app that changes layout on my page (re-position of the elements)...

mostly is done by bootstrap collapsing and fading (tabs, collapsibles, accordions)...

I would like to fire an event whenever a change is about to happen and another when the change is done..

right now I came out with something like that

$('.collapse').on("shown hidden", function(){
    jQuery(myAPP).trigger("layoutchanged");
});
$('.collapse').on("show hide", function(){
    jQuery(myAPP).trigger("layoutchanging");
});

and then...

jQuery(myAPP).on("layoutchanging", function(e){
    log("Start changing");
});

jQuery(myAPP).on("layoutchanged", function(e){
    log("Layout changed");
});

it works for collapse and accordions OK.

but on tabs, where the markup is like this:

<ul class="nav nav-tabs can_deactivate">
    <li><a href="#tab_1" data-toggle="tab">Open Tab 1</a></li>
    <li><a href="#tab_2" data-toggle="tab">Open Tab 2</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane fade" id="tab_1">
        Lorem ipsum
    </div>
    <div class="tab-pane fade" id="tab_2">
        Lorem ipsum
    </div>
</div>

Works only on show, but not on hide... what can I do?

JS FIDDLE: http://jsfiddle.net/KL7Af/