CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Erik
Erik

Reputation: 957

Controlling bootstrap accordion with jQuery

I'm currently implementing a bootstrap accordion widget, and would like to place an element on each panel's body that allows me to switch the currently open panel (expands another and hides the others). I'm currently doing this by using a jQuery wildcard selector to collapse all the panels, and then showing the one I need:

$(".displayPanel").click((e) => {
  $("[id^='collapse']").collapse('hide');
  $("#collapse" + e.target.text).collapse('show');
})

For some reason this seems to affect the default Bootstrap behavior of opening and closing panels (Panels end up getting left open, etc). Here is a minimal example to demonstrate the issue. Is there a better way to go about accomplishing something like this?

Thanks in advance.

Upvotes: 0

Views: 164

Answers (1)

Baro
Baro

Reputation: 5530

You must to wait for "hide" and then you can run "show". Here the updated fiddle.

Probably it would be cleaner if there was an event to indicate when "Hide" is completed.

$(".displayPanel").click((e) => {
  $("[id^='collapse']").collapse('hide');
  setTimeout(function(){
    $("#collapse" + e.target.text).collapse('show');
  },1000);
});

Upvotes: 1

Related Questions