That's because `#home3-2` is nested within a tab that is hidden.

Another way to look at this is what would happen for the following code?:

    <div> 1
        <div style="display:none"> 2
            <div style="display:block"> 3 </div>
        </div>
    </div>

Even though you have made the bottom div visible, it will still be hidden by its parent.

When loading the page, you'll have to traverse the dom for any hidden parent tabs and call `show` on them as well.

    if (location.hash) {
        $('a[href=' + location.hash + ']').tab('show');
        // code to also show parent tabs
    }

You could do that like this:


    //get the hashed element and find all of it's parent tabs that aren't active
    $(location.hash).parents('.tab-pane:not(.active)').each(function() {
        //each pane should have an id - find it's anchor target and call show
        $('a[href=#' + this.id + ']').tab('show');
    });

Demo in fiddle:

http://jsfiddle.net/KyleMit/bvta2/11/show/#home3-2

I have a structure of tabs with 3 levels:

    
    <ul class="nav nav-tabs" role="tablist">
      <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
      <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
    </ul>    
    
    <div class="tab-content">
      <div class="tab-pane active" id="home">      	
        <p>Home content.</p>      
      	
        <ul class="nav nav-tabs" role="tablist">
          <li class="active"><a href="#home2" role="tab" data-toggle="tab">Home 2</a></li>
          <li><a href="#profile2" role="tab" data-toggle="tab">Profile 2</a></li>
        </ul>    
        
        <div class="tab-content">
          <div class="tab-pane active" id="home2">          
          <p>Home 2 content.</p>              
          
        <ul class="nav nav-tabs" role="tablist">
          <li class="active"><a href="#home3-1" role="tab" data-toggle="tab">Home 3-1</a></li>
          <li><a href="#profile3-1" role="tab" data-toggle="tab">Profile 3-1</a></li> 
        </ul>    
        
        <div class="tab-content">
          <div class="tab-pane active" id="home3-1"><p>Home 3-1 content.</p></div>
          <div class="tab-pane" id="profile3-1"><p>Profile 3-1 content.</p></div>
        </div>          
          </div>
          <div class="tab-pane" id="profile2">
          <p>Profile 2 content.</p>         
          
        <ul class="nav nav-tabs" role="tablist">
          <li class="active"><a href="#home3-2" role="tab" data-toggle="tab">Home 3-2</a></li>
          <li><a href="#profile3-2" role="tab" data-toggle="tab">Profile 3-2</a></li> 
        </ul>
          
        <div class="tab-content">
          <div class="tab-pane active" id="home3-2"><p>Home 3-2 content.</p></div>
          <div class="tab-pane" id="profile3-2"><p>Profile 3-2 content.</p></div>
        </div>           
          </div>
        </div>         
      </div>
      <div class="tab-pane" id="profile">Profile content.</div>
    </div>

This code could be checked here: ([http://jsfiddle.net/bvta2/3/][1]).

When you access the link [http://fiddle.jshell.net/bvta2/3/show/#profile3-1][2], the Profile 3-1 tab appears active. However, when accessing [http://fiddle.jshell.net/bvta2/3/show/#home3-2][3], for example, the Home 3-2 tab is not active.

How can I solve this using jQuery? Thanks!


  [1]: http://jsfiddle.net/bvta2/3/
  [2]: http://fiddle.jshell.net/bvta2/3/show/#profile3-1
  [3]: http://fiddle.jshell.net/bvta2/3/show/#home3-2