Activate the tab of the location hash

Question

I have a structure of tabs with 3 levels:

Answer 1

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