[en] Bootstrap – accordion closes modal

Because Bootstrap events are not namespaced until they release version 3.0 (see https://github.com/twitter/bootstrap/issues/3736), they conflict with each other. It causes for instance closing modals when switching accordion tabs — they both listen to „hidden” event. A simple, global solution is not to use data-toggle=”collapse” but following code (that attaches „live”, 1.9.x jQuery style):

$(document).on('click', 'a.accordion-toggle', function(event) {
    event.preventDefault();
    var parent = $(this).parent().parent(),
        body = parent.find('.accordion-body');
        
    // hide currently shown group
    parent.parent().find('.accordion-body.collapse.in').collapse('toggle').on('hidden', function(event) {
        event.stopPropagation();
    }); 
    
    // show newly clicked group
    body.collapse('toggle').on('hidden', function(event) {
        event.stopPropagation();
    });
});