jQuery UI Tabs Widget and Nested list - yui

Question

I have following nested tabs that I want to show in
<div id="1">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<div id="a">
<div id="aa1h">
Sub Tab AA1 Header
</div>
<div id="aa1c">
Sub Tab AA1 Content
</div>
<div id="aa2h">
Sub Tab AA2 Header
</div>
<div id="aa2c">
Sub Tab AA2 Content
</div>
</div>
</div>
$('#1').tabs();
Now I want to display three tabs using jQuery tabs or YUI tabview as following:
First tab displays #a (the whole thing)
Second tab displays #aa1c (only content for aa1)
Third tab displays #aa2c (only content for aa2)
I am having some problems with this method, any help is appreciated.
http://jsfiddle.net/RQcwE/1/
See above example for my problem.
UPDATE:
With help from Hanlet Escaño I have achieved what I wanted with couple of blank divs and some jQuery Code..
http://jsfiddle.net/RQcwE/3/

Answer 1

This is an example with sub-tabs that might work for you:
<div id="1">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
<div id="a">
<ul>
<li>Sub A 1</li>
<li>Sub A 2</li>
</ul>
<div id="aa1">
Sub Tab A content 1
</div>
<div id="aa2">
Sub Tab A content 2
</div>
</div>
<div id="b">
<ul>
<li>Sub B 1</li>
<li>Sub B 2</li>
</ul>
<div id="bb1">
Sub Tab B content 1
</div>
<div id="bb2">
Sub Tab B content 2
</div>
</div>
<div id="c">
<ul>
<li>Sub C 1</li>
<li>Sub C 2</li>
</ul>
<div id="cc1">
Sub Tab C content 1
</div>
<div id="cc2">
Sub Tab C content 2
</div>
</div>
</div>
you just build them like this:
$("#1" ).tabs();
$("#a" ).tabs();
$("#b" ).tabs();
$("#c" ).tabs();
JSFiddle: http://jsfiddle.net/p84kC/