Target tabs within tabs with #hash URL (or otherwise)

Question

I am using the jQuery Tools library Tabs. You can find them here: http://flowplayer.org/tools/tabs/index.html

My basic markup is something like this:

$("#tab-holder ul").tabs("div.tab", { history: true, api: true })
$("#profile-sub-tabs ul.menu").tabs("div");

The #profile-sub-tabs is another tab interface within the main #tab-holder interface. The plugin is using a parameter called history which basically allows me to target the tabs using their names, for example:

http://www.blah.com/tabs.aspx#account

Would lead me to the account tab. This works fine, but I want to be able to target sub-tabs specifically. I know this code does not work, but the theory is something like this:

http://www.blah.com/tabs.aspx#account#profile

Leads me to the account->profile tab. Simple enough.

Now I'm not sure if this is possibly to do through the URL, or if I should just somehow handle the requests via Javascript (somehow) and manually use the API to switch to the correct tabs. I'm just not sure how I would go about grabbing that data to switch to the correct tab.

Thanks!

Answer 1

There doesn't seem to be an official solution for this problem. I've managed to roll one myself, which will work as long as you can assign a unique ID to each sub-tab.

The idea is basically that you don't actually need to tell the page which top tab to open, because it can be inferred from looking for the sub-tab that is being requested. So in your link, you would only need to reference the sub-tab, like so:

http://www.blah.com/tabs.aspx#profile

Before I get started, here's a live demo showing this in action: http://jsfiddle.net/CrAU7/

Let's say you have an html structure like so:

<div class="wrap">
    <!-- the tabs -->
    <ul class="tabs">
        <li><a href="#big1">Tab 1</a></li>
        <li><a href="#big2">Tab 2</a></li>
        <li><a href="#big3">Tab 3</a></li>
    </ul>
    <!-- tab "panes" -->
    <div class="pane" id="big1">
        <p>#1</p>
        <!-- the tabs -->
        <ul class="tabs">
            <li><a href="#big1small1">Tab 1</a></li>
            <li><a href="#big1small2">Tab 2</a></li>
            <li><a href="#big1small3">Tab 3</a></li>
        </ul>
        <!-- tab "panes" -->
        <div class="pane" id="big1small1">Tab 1 - First tab content.</div>
        <div class="pane" id="big1small2">Tab 1 - Second tab content</div>
        <div class="pane" id="big1small3">Tab 1 - Third tab content</div>
    </div>
    <div class="pane" id="big2">
        <p>#2</p>
        <!-- the tabs -->
        <ul class="tabs">
            <li><a href="#big2small1">Tab 1</a></li>
            <li><a href="#big2small2">Tab 2</a></li>
            <li><a href="#big2small3">Tab 3</a></li>
        </ul>
        <!-- tab "panes" -->
        <div class="pane" id="big2small1">Tab 2 - First tab content.</div>
        <div class="pane" id="big2small2">Tab 2 - Second tab content</div>
        <div class="pane" id="big2small3">Tab 2 - Third tab content</div>
    </div>
    <div class="pane" id="big3">
        <p>#3    </p>
        <!-- the tabs -->
        <ul class="tabs">
            <li><a href="#big3small1">Tab 1</a></li>
            <li><a href="#big3small2">Tab 2</a></li>
            <li><a href="#big3small3">Tab 3</a></li>
        </ul>
        <!-- tab "panes" -->
        <div class="pane" id="big3small1">Tab 3 - First tab content.</div>
        <div class="pane" id="big3small2">Tab 3 - Second tab content</div>
        <div class="pane" id="big3small3">Tab 3 - Third tab content</div>
    </div>
</div>

The important thing to note is that I've given tab pane a unique ID, and the tab's href is the same ID, prefixed with a hash. Then you'll need a function like this:

function TabByHash(hash) {
    var $myTab = $(hash);
    if ($myTab.size() != 0) {
        //alert('hi!');
        var $topTab = $myTab.parent().closest('.pane');
        if ($topTab.size() != 0) {
            $('a[href=#' + $topTab.attr('id') + ']').click();
        }
        $('a[href=#' + $myTab.attr('id') + ']').click();
    }
}

On page load, you'll want to call the function with the hash part of the url: TabByHash(window.location.hash); This then looks for a tab pane with the corresponding ID. If the pane is located within a parent pane, it first activates that parent pane, then activates the requested pane. Otherwise it simply activates the requested pane. Hopefully this will do the trick for you.

NOTE: Due to restrictions on the jsFiddle demo, I bound the TabByHash function to anchor clicks, but in your situation, you will want to just call it on page load.