Show event not working on Bootstrap Collapse

Question

The "show" event doesn't appear to be working on a collapsible that is dynamically created. Multiple panels stay open when calling the javascript function. Clicking the panel headers still works fine, and if I manually click the panels first, then the "show" method appears to work. But ONLY if I click on the panel headers first. Any ideas?

JSFiddle example: http://jsfiddle.net/victoryismine06/N6rey/

//Click handler
$( "#btnOpen" ).click(function() {
  var idx = $("#idx").val();
    $("#accordion2 #collapse" + idx).collapse('show');    
});

PSL PSL · Accepted Answer · 2013-11-12T19:14:20

Try this way.

$("#btnOpen").click(function () {
    var idx = $("#idx").val();
    //Just find the data-toggle element respective to the current element and invoke the click on it.
    $("#collapse" + idx).filter(':not(.in)').prev().find('[data-toggle]').trigger('click.bs.collapse.data-api');

   //or just simply do:
   // $("#accordion2").find('[data-toggle]:eq(' + idx + ')').trigger('click.bs.collapse.data-api');

   //Or you can also do:
   //$("#accordion2 .panel-collapse.in").not($("#collapse" + idx).collapse('show')).collapse('hide');
});

Demo

Reason being invocation of collapse method will just collapse current elements based on what type is passed, i.e hide, show or toggle. it doesnot handle the auto collapse of other open items which is handled in the custom click event attached to [data-toggle] elements in the collapsible. I.e in the below section:

$(document).on('click.bs.collapse.data-api', '[data-toggle=collapse]', function (e) {

So invoking a click event on the respective data-toggle element will handle the real collapse scenario.

Show event not working on Bootstrap Collapse

1 Answers