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>