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/

But they are inside your "a" div, you are going to have to take those outside of "a" if you want them to work, or use some jQuery to load them inside the "a" dynamically. — Hanlet Escaño, Oct 29 '13 at 19:52
Yes. I am trying to get some examples/pointers of jQuery load. Thanks! — ai2517, Oct 29 '13 at 21:29
Check this out: http://jsfiddle.net/hescano/RQcwE/2/ that has the other two tabs outside where they belong, but appends its content to the first tab after load. — Hanlet Escaño, Oct 29 '13 at 21:33
OK with your pointer, I achieved what I wanted! Thanks for your help!! http://jsfiddle.net/RQcwE/3/ — ai2517, Oct 29 '13 at 21:46

score 1 · Accepted Answer · answered Oct 29 '13 at 19:17

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/

Thanks for quick response! Sorry, I did not explain it well in the first place, I have now updated the question and also added jsfiddle to show what I am trying to do. Basically, I don't want nested tabs but I want to have first tab shows entire content while other two only a portion. Thanks again for your help! — ai2517, Oct 29 '13 at 19:46

jQuery UI Tabs Widget and Nested list

1 Answers1