What is the correct way to nest tabs?

What is the correct way to nest tabs?


Does anyone know if there is a "correct" way to nest tabs?
By "nest tabs" I mean.
I want one row of tabs (tabA, tabB, tabC) such that when I select tabA
or tabC content is rendered directly onto those tabs.
But when I select tabB a second row of tabs displays beneath the first
(tabX, tabY, tabZ).
I've got some code that seems to be working except for one minor
problem.
tabA is selected by default and when the page loads the "tabshow"
event seems to be getting called twice.
It's a minor problem that I can code around but I'm curious as to why
it might be happening and/or if this is a bug?
Here's my code ...
HTML:
<div id="tabrow1" >
<ul>
<li><a href="home.jsp" class="homeTab">Home</a></li>
<li><a href="#tabrow1-2">Find a quote</a></li>
<li><a href="addQuote.jsp">Add a quote</a></li>
</ul>
<div id="tabrow1-2">
<div id="tabrow2">
<ul>
<li><a href="findQuote.jsp" class="searchTab">Search</a></li>
<li><a href="authors.jsp">Browse by author</a></li>
<li><a href="recentlyAdded.jsp">Recently added</a></li>
</ul>
</div>
</div>
</div>
JavaScript:
$(document).ready(function() {
var $tabs = $("#tabrow1").tabs();
var findaQuoteTabs = $("#tabrow2").tabs();
$('#tabrow1').bind('tabsshow', function(event, ui) {
var selected = $tabs.tabs('option', 'selected'); // => 0
if (selected == 0) {
home_renderContent(); // This gets called twice when the page
loads. Hmmmmmm... I wonder why????
}
});
$('#tabrow2').bind('tabsshow', function(event, ui) {
var selected = findaQuoteTabs.tabs('option', 'selected'); // => 0
if (selected == 1) {
authors_sortByName();
}
if (selected == 2) {
recentlyAdded_listQuotes();
}
});
});