jQuery UI Tabs Widget and Nested list

Question

I have following nested tabs that I want to show in

<div id="1">
<ul>
    <li><a href="#a">A</a></li>
    <li><a href="#aa1c">B</a></li>
    <li><a href="#aa2c">C</a></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 href="#a">A</a></li>
        <li><a href="#b">B</a></li>
        <li><a href="#c">C</a></li>
    </ul>
    <div id="a">
        <ul>
            <li><a href="#aa1">Sub A 1</a></li>
            <li><a href="#aa2">Sub A 2</a></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><a href="#bb1">Sub B 1</a></li>
            <li><a href="#bb2">Sub B 2</a></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><a href="#cc1">Sub C 1</a></li>
            <li><a href="#cc2">Sub C 2</a></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/