I am close to getting this to work, but can't get the final piece. Initially I have two tab. The first tab shows a picture. The 2nd tab has nested 3 rows of tabs. I need the nested rows of tabs to work but can't get that piece. Here's the code I'm using. Help would be greatly appreciated.
<table width="800" border="0" align="center" cellpadding="0"
cellspacing="0" id="TblContainer">
<tr>
<td valign="top" align="left">
<!-- First Level Tabs -->
<ul class="tabs" >
<li><a href="#Who" id="t1">Who We Are</a></li>
<li><a href="#What" id="t2">What We Do</a></li>
</ul>
<!-- First Level "panes" -->
<div class="panes">
<p>Org Chart</p>
<!-- Second Level Tabs -->
<ul class="tabs" >
<li><a href="#Mark">Mark</a></li>
<li><a href="#Jim">Jim</a></li>
<li><a href="#Scott">Scott</a></li>
</ul>
<ul id="flowtabs" class="tabs">
<li><a href="#Bill">Bill</a></li>
<li><a href="#Ted">Ted</a></li>
</ul>
<!-- Second Level "panes" -->
<div class="panes">Mark's content.</div>
<div class="panes">Jim's content</div>
<div class="panes">Scott's content</div>
<div class="panes">Bill's content</div>
<div class="panes">Ted's content</div>
</div>
</div>
</div>
<script>
$(function() {
$("ul.tabs").tabs("> .pane");
});
</script>
</td>
</tr>
</table>
