'shown-accordion.bs.tabcollapse' does not fire after each click

[buzzguy]

I'd like to add a scroll to top function after each collapse is shown, but testing the example code only fires when transitioning from tabs to accordion (scaling the browser width), but not when clicking each panel.

$('#myTab').on('shown-accordion.bs.tabcollapse', function(){
alert('accordion is shown now!');

});

[buzzguy]

whoops, nm, figured it out:
$(".panel-collapse").on("shown.bs.collapse", function (e) {
$('html, body').animate({scrollTop: $(e.target).offset().top -115}, 500);
});

[okendoken]

Hi @buzzguy!

Yes, if you want to attach an event for a single accordion group you need to use shown.bs.collapse as described in BS accordion docs.

Tab collapse events are for entire tabs/accordion component.

Thanks

[okendoken]

A small update, this code of yours:

$(".panel-collapse").on("shown.bs.collapse", function (e) {
    $('html, body').animate({scrollTop: $(e.target).offset().top -115}, 500);
});

won't always work. In case page is first opened at a large screen - there will be no .panel-collapse elements. So it's better to handle them at the document level:

$(document).on("shown.bs.collapse", ".panel-collapse", function (e) {
    $('html, body').animate({scrollTop: $(e.target).offset().top -115}, 500);
});

[okendoken]

And the last update @buzzguy :)

To attach an event handler when either tab or collapse is opened:

$(document).on("shown.bs.collapse shown.bs.tab", ".panel-collapse, a[data-toggle='tab']", function (e) {
    alert('either tab or collapse opened - check arguments to distinguish ' + e);
});

Hope it helps!