CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-3
MisterIsaak
MisterIsaak

Reputation: 3922

Show event not working on Bootstrap Collapse

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

Upvotes: 1

Views: 3748

Answers (1)

PSL
PSL

Reputation: 123739

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.

Upvotes: 2

Related Questions