Collapse initial state problem

[augnustin]

I've read couple of problems concerning the collapse initial state, but none exactly reproduces and offers a solution to my issue.

This fiddle clearly describes the problem: http://jsfiddle.net/MC8wL/

I have .block1 .collapse .in and .block2 .collapse.
If with js, I call the .block1 to show, it actually collapses the first time. Then the programmatically stored state works and it goes well.

In the example, click Show 1 button, and the opposite behaviour as expected will happen.

How can I avoid this to occur? Am I wrongly initializing the state?

Thanks for the help!

[cvrebert]

Confirmed in current master: http://jsfiddle.net/deJ4b/1/

[cvrebert]

So, my current hypothesis is that this is due to the Collapse constructor defaulting its toggle option to true.
Thus, when you call .collapse('show') on an uninitialized element, a toggling of it to hidden gets initiated asynchronously by the constructor before show gets called.
I think this results in a race condition between the show and the hide, which the hide apparently wins.

[Soundvessel]

Collapsed class doesn't get applied initially. Only on user action with accordion is it properly added to all accordion elements that start out collapsed http://screencast.com/t/eXYKeokJYIGT This makes is difficult theming say a up/down arrow on the element.

[colllin]

@Soundvessel what happens if you add the collapsed class yourself in the
initial element state? That is what's required for generic
(non-panel-based) collapsible elements.

On Fri, Jan 17, 2014 at 5:40 PM, Soundvessel [email protected]:

Collapsed class doesn't get applied initially. Only on user action with
accordion is it properly added to all accordion elements that start out
collapsed http://screencast.com/t/eXYKeokJYIGT This makes is difficult
theming say a up/down arrow on the element.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/12254#issuecomment-32669068
.

[augnustin]

I have tried many combinations to get the expected behaviour, but none of them worked (.collapse, .collapsed, .collapsed.in, .collapse.collapsed, .collapse.collapsed.in etc.)

The closest solution I have is to have a .collapse, and to show it in js on load, but then the opening animation runs onload, which I'd rather not.

If anyone has a hacky solution to get around this before bugfix, it would be very appreciated. Thanks.

[nanotronic]

I use .collapse and then in javascript: el.collapse({toggle: false});
This works for me

[augnustin]

Thanks @nanotronic. Indeed it seems that

$('document').ready(function(e) {
  $('.collapse').collapse({toggle: false});
});

Initializes the js states as expected. This fiddle implements it : http://jsfiddle.net/cH6q6/

[fat]

so… close issue?

[cvrebert]

Punting to v4.

[Esger]

@aug-riedinger Are you in fact asking about the bootstrap 2.3.2 Collapse because I'm not sure which collapse your are using in your Fiddle. For me leaving out the 'collapse' class from the accordion-body is working. In fact I leave out all the classnames like 'in' and 'collapsed' which are added automatically by the initialization (.collapse()) or when the accordion is actually being used. Of course you still need the data-attributes for the accordion-toggle.