Issue when using Bootstrap fade class

[gellmaster]

Cool solution to a common problem. Thanks for putting it out here.

I ran into an issue utilizing the fade class with tabs that I thought I’d report.

Using your example code I can reproduce the issue.

• Add the "fade" class to divs with tab-pane.
• On initial load of the page when in panel mode, click “Key Features” or “Source” panel.

“How To” will stay open in addition to the other panel opening. It works correctly with subsequent collapses on any panel. I've tested with Bootstrap 3.2.0 and the problem still exists.

Removing fade from my tab-panes everything works as expected. I’m not exactly sure of the root cause, something to do with the transition and timing probably, but it may be worth documenting unless a solution is found.

Here is a jsfiddle that demos the issue with the same setup as your example page. http://jsfiddle.net/r429t/

[openam]

That's interesting. I guess I haven't used the "fade" class on the tabs-panes before, and I'm not sure how it works. It looks like it's only on the first panel-group that is selected.

[mcjwb]

I had this problem when I was modifying the source to support accordions within a tab's content. As Gellmaster says I also think it's a timing issue. It appears to be related to the fact that .removeClass('panel-body') is called in panelToTab() but then in bindTabToCollapse() you attempt to remove and add the "active" class based on the "panel-body" class (i.e. $( panelGroup ).find( '.panel-body' ).removeClass( 'active' );) The problem is that by the time bindTabToCollapse is called the 'panel-body' classes have been changed to 'tab-pane' so the 'active' class doesn't get removed and you end up with two divs with the 'active' class hence you see the contents of two panels.

Without a lot of further investigation, which I don't have time to do right now, I'm not sure about a fix for this. Can the bindTabToCollapse method be called before the panelToTab method or does elements of bindTabToCollapse need refactoring into panelToTab and TabToPanel?

(On an unrelated note, I think some of your jQuery selectors are too loose, e.g. in PanelToTab you use

var panelContents = $( panelGroup ).find( '.panel-body' ); 

when I think something like

var panelContents = $( panelGroup ).find( '> .panel > .panel-collapse > .panel-body' );

would be better[need to check the syntax and efficiency of that selector] as it won't select any .panel-body's in the actual content itself.)

[openam]

The unrelated note looks like it's the issue discussed in #17.

[openam]

The unrelated note should have been addressed with #39.