Already Visible collapse gets closed when .collapse('show') is called

[lightningdev45]

I have a panel-collapse in a dropdown menu that I want to to open up if the panel contains a link with the ".active" css class. To make this work I close all collapses and then open up the one I want to open when the dropdown is hidden (note, all of the collapses start open by default):

$('#dropdown').on('hide.bs.dropdown', function (event) {
      $('.panel-collapse.in').not(":has(.active)").collapse('hide');
      $("#dropdown .active").parent("ul").parent(".panel-collapse").collapse('show');
    });

However this doesn't work. The .collapse('show') is actually closing the open panel for some reason. However if I use more specific css and don't explicitly show the panel I want to have open unless it is closed, it works:

$('#dropdown').on('hide.bs.dropdown', function (event) {
      $('.panel-collapse.in').not(":has(.active)").collapse('hide');
      $("#dropdown .active").parent("ul").parent(".panel-collapse:not(.in)").collapse('show');
    });

[cvrebert]

Can you please confirm that you're seeing this with Bootstrap v3.2.0?

[hnrch02]

Also, please post a JS Bin or similar demonstrating the problem.

[lightningdev45]

I am using Bootstrap v3.2.0. I will post a JS Bin etc when I have a little more time later today or tomorrow.

[hnrch02]

This happens for me only once when you call it the first time. It's because (for some reason) the toggle method is executed on initialization by default. You should be able to disable this by passing in { toggle: false }, but due to the nature of the API we expose to $.fn.collapse, you can only pass in a string containing the method you want to execute (in your case show) or an options object.
I could propose a fix which would allow you to pass in a method name and an option object or we could disable toggling by default, but not without breaking backward compatibility.

Anyway, a immediate solution to your problem could also be:

$.fn.collapse.Constructor.DEFAULTS.toggle = false;

/cc @fat

PS: Sorry for the wall of text.

[lightningdev45]

That is exactly what was happening for me; only the first time.

[hnrch02]

I see. Why close this issue though?

[lightningdev45]

Oh well I was just going to use your suggested quick-fix. But I'll reopen so everyone knows it is not properly solved.

[hnrch02]

Yeah, I'd like to see this fixed by either of the two approaches I suggested above.

[brianjessup]

The same issue applies when you have a hidden collapse and you apply .collapse('hide') the first time.

[maniqui]

I can confirm this issue (happening both on 'show' and 'hide').

I could swear that this just started to happen all of a sudden: one day it wasn't happening, the next one, the issue was there. Once of those things that I cannot begin to explain... In the middle, I upgraded to v3.2.0, but then I just reverted to see if it happened on v3.1.1, and it did too.

[fat]

setting the default to false is not really a great solution… i think when most people call .collapse() they want it to collapse.

we could definitely be smarter about it

[hnrch02]

Yeah, but in this case .collapse('show') was called and the collapse was closed, because of the auto toggle on initialization.

[fat]

@hnrch02 any reason not to just do this: #14417

[Glideh]

I have this behavior with 3.3.1

This fiddle tries to show a collapse but all get opened

Manually disabling toggle on all collapse seems to remove the behavior

$('.collapse').collapse({'toggle': false})

But this workaround (suggested in old #5859) does not work programmatically with 3.2.0, seeming like a race condition here.

Is there an explanation somewhere of why this toggle event fired first ?

[twbs-lmvtfy]

Hi @Glideh!

You appear to have posted a live example (http://s.bootply.com/render/3dBY2KSn8y), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• line 9, column 9: W013: Bootstrap version might be outdated. Latest version is at least 3.3.2 ; saw what appears to be usage of Bootstrap 3.3.1
• line 87, column 9: W013: Bootstrap version might be outdated. Latest version is at least 3.3.2 ; saw what appears to be usage of Bootstrap 3.3.1

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(Please note that this is a fully automated comment.)

[hnrch02]

@Glideh Please file a new issue. Thanks! Actually, sounds like your problem should be fixed by #15807.