jQuery tabs within tabs not showing correctly

Question

I have custom javascript code for tabs which works fine, but Im trying to put children tabs within, shown here:

<div id="tabs" style="position:relative; ">
            <ul id="nav">
              <li><a href="#prizes">Prizes</a></li>
              <li><a href="#basket">Your sack</a></li>
              <li><a href="#order-history">Order History</a></li>
            </ul>

            <div id="tab-prizes" class="tab"> 
              <?php include('prizes.php');?>
            </div>

And then within the prizes.php file:

<div id="tabsprizes" style="position:relative; ">
            <ul id="nav1">
              <li><a href="#branded">Weber Branded</a></li>
              <li><a href="#for-him">For Him</a></li>
            </ul>

            <div id="tab-branded" class="tab">

                <?php echo "fgdsd"; ?>

            </div>

I would like it so they go to the prizes tab for example, and within that there is another set of tabs, which they can use only within that page. When clicking on the child tabs at the moment, all the content dissapears. Here is my JS:

$("#parenttabs #nav a").click(function() {   //Parent Tabs Click Function
    var hash = this.getAttribute("href");
    if (hash.substring(0, 1) === "#") {
        hash = hash.substring(1);
    }

    location.hash = hash;
    showTab(hash);

    return false;
});

function showTab(hash) {
    $("div.tab").hide();
    $("#tab-" + hash).fadeIn();
}

Sorry for all the code, not sure exactly what to show :/

Thanks

Answer 1

Taking a look at the JQuery UI tabs documentation, I see no references to tab-in-tab functionality. Assuming, of course, that you're using JQuery UI.

Here's an example markup of JQuery UI nested tabs. Study it and you might be able to find out why your code doesn't work as intended.

I'd suggest you take a look at JQuery tools, as it does openly support tab-in-tab functionality.

Here's an example of JQuery tools nested tab markup and script.

Answer 2

If you are using jQuery UI there should be no problem nesting tabs. Just make sure the elements are using unique ID's

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">First Tab</a></li>
        <li><a href="#tabs-2">Second Tab</a></li>
    </ul>
    <div id="tabs-1">
        <p>Nothing to show..</p>
    </div>
    <div id="tabs-2">
        <p>Tabs in tab!</p>
        <div id="more-tabs">
            <ul>
                <li><a href="#nested-tabs-1">Child Tab 1</a></li>
                <li><a href="#nested-tabs-2">Child Tab 2</a></li>
            </ul>
            <div id="nested-tabs-1"><p>Content here...</p></div>
            <div id="nested-tabs-2"><p>More content here...</p></div>
        </div>
    </div>
</div>

jsFiddle example