Bootstrap nested tab not displaying until being re-selected

Question

I am designing an admin panel for my application using nested tabs. Here is a basic diagram of how the tabs are set up.

1. Initially Active and Visible

   -1a Initially Active and Visible

   -1b Inactive

   -1c Inactive

2. Inactive

   -2a Initially Active but NOT Visible

   -2b Inactive

   -2c Inactive

2a is not visible at first because its parent(2) is not active however 2a does have the tag:

<li class='active'>

When I click on tab 2, tab 2a appears to be active, but the tab-pane is empty. Looking at the page source shows that there is data in the tab-pane for 2a. In order to see it I must click on tab 2b, then click back to tab 2a. My first thought was to remove .active from 2a. This then requires the user to click on 2a to active it instead of de-activating then re-activating to display the content. What I want to happen is for 2a to be immediately visible when tab 2 is clicked. Sorry for the long explanation. Below is the code if that is easier for you to sort through.

I placed the HTML code in this jsfiddle because it was too long to include in the post.

http://jsfiddle.net/vhFFf/

EDIT:

Here is a working fiddle that accurately shows the issue I am trying to correct:

http://jsfiddle.net/52VtD/4862/

Be sure to drag the Result pane as wide as possible so that the content displays as intended. When you click the "Users" button in the most left menu, the initially active pane content is not displayed. You must click "add user" or "trash" then click back to "Users" to see that panes content.

Answer 1

I think you have to manually add the active class to the pane to make it active when you switch to that tab <div class="tab-pane active" id="user"> I updated you FIDDLE

that was the simplest solution I could think of hope it helps.