Ok, following up on my last entry, here is the same nested tab set done with the ExtJS UI Library. I went the the "Build Your Own" section within "Downloads" and built a script for JQuery with the ExtJS Core and the TabPanel. I also downloaded the whole library so that I had all of the example scripts, css, and images. After this I included the following files in my document header (notice the pathing changes):

view plain print about
1<script src="http://www.myserver.com/js/jquery/jquery-1.1.2.pack.js" type="text/javascript"></script>
2<script src="http://www.myserver.com/js/ext-1.0/ext.js" type="text/javascript"></script>
3<script src="http://www.myserver.com/js/custom/ExtJSTabsDemo.js" type="text/javascript"></script>
4<link rel="stylesheet" href="http://www.myserver.com/resources/css/ext-1.0/tabs.css" type="text/css">
5<link rel="stylesheet" href="http://www.myserver.com/resources/css/ext-1.0/tabs-example.css" type="text/css">

I also adjusted the pathing of all image references in the css files. Then we add the same div/form code from our prior example, minus the unordered lists.

view plain print about
1<div id="container">
2    <div id="half-frag">
3        <form name="section-1" id="section-1" action="process.cfm" method="post" enctype="multipart/form-data">
4            <div id="form1_step1" class="frmStep">
5             Field 1: <input type="text" name="field1" id="field1" />
6            </div>
7            <div id="form1_step2" class="frmStep">
8             Field 2: <input type="text" name="field2" id="field2" />
9            </div>
10            <div id="form1_step3" class="frmStep">
11             Field 3: <input type="text" name="field3" id="field3" /><br />
12             <input type="submit" name="submit" id="submit" value="Post Form" />
13            </div>
14        </form>
15    </div>
16    <div id="fragment-1">
17        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
18        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
19        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
20        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
21        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
22        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
23    </div>
24    <div id="fragment-2">
25        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
26        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
27    </div>
28    <div id="fragment-3">
29        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
30        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
31        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
32    </div>
33</div>

The last thing is building that custom script, ExtJSTabsDemo.js. This is solely for defining your tab sets.

view plain print about
1$(document).ready(function(){
2    var tabs1 = new Ext.TabPanel('container');
3    tabs1.addTab('half-frag','Form 1');
4    tabs1.addTab('fragment-1','pg 2');
5    tabs1.addTab('fragment-2','pg 3');
6    tabs1.addTab('fragment-3','pg 4');
7    
8    // Create the nested tab set
9    var nTabs1 = new Ext.TabPanel('half-frag');
10    nTabs1.addTab('form1_step1','Step 1');
11    nTabs1.addTab('form1_step2','Step 2');
12    nTabs1.addTab('form1_step3','Step 3');
13    // Activate in reverse order
14    nTabs1.activate('form1_step1');
15    tabs1.activate('half-frag');
16    // Set the heights of each tab to be consistent
17    // per tab set
18    nTabs1.syncHeight(100);
19    tabs1.syncHeight(150);
20});

Notice there's quite a bit more JS involved here than in our previous example. But, it does work.

Field 1:
Field 2:
Field 3:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.