Sun	Mon	Tue	Wed	Thu	Fri	Sat
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28

Updated JQuery Nested Tab Set with Demo

Posted At : June 15, 2007 2:00 PM | Posted By : Cutter
Related Categories: ColdFusion, Development, JQuery

Ok, there have been some changes, but I'll try to keep it easy, with an example, and there will be an included .zip file. First, you'll need the latest JQuery build, as well as the latest version of the Tabs Plugin. Pay attention to the pathing I have created in my code snippets here.

Include the necessary JavaScript libraries and CSS files:

Next, layout your content. You'll notice that container elements have changed slightly from before.

<div id="container">
    <ul>
<li><a href="#half-frag"><span>Form 1</span></a></li>
        <li><a href="#fragment-1"><span>One</span></a></li>
<li><a href="#fragment-2"><span>Two</span></a></li>
<li><a href="#fragment-3"><span>Tabs are flexible again</span></a></li>
</ul>
<div id="half-frag">
    <form name="section-1" id="section-1" action="process.cfm" method="post" enctype="multipart/form-data">
        <ul class="anchors">
     <li><a href="#form1_step1"><span>Step 1</span></a></li>
     <li><a href="#form1_step2"><span>Step 2</span></a></li>
     <li><a href="#form1_step3"><span>Step 3</span></a></li>
     </ul>
     <div id="form1_step1" class="frmStep">
     Field 1: <input type="text" name="field1" id="field1" />
     </div>
     <div id="form1_step2" class="frmStep">
     Field 2: <input type="text" name="field2" id="field2" />
     </div>
     <div id="form1_step3" class="frmStep">
     Field 3: <input type="text" name="field3" id="field3" /><br />
     <input type="submit" name="submit" id="submit" value="Post Form" />
     </div>
    </form>
    </div>
    <div id="fragment-1">
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.
</div>
<div id="fragment-2">
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.
</div>
<div id="fragment-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.
</div>
</div>

Your end result should look a little like this:

Form 1
One
Two
Tabs are flexible again

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.

The files (minus the js libraries) should be included in the Download below. Next time out I'll do the same with JQuery and the ExtJS UI Library.

Comments (42) |

Print |

Send |

Download |

del.icio.us |

Digg It! |

Linking Blogs | 122859 Views

Related Blog Entries

ExtJS Nested Tab Set with Demo (June 15, 2007)
Nested Tab Sets with JQuery and the Tabs Plugin (March 16, 2007)

TweetBacks

Comments

[Add Comment] [Subscribe to Comments]

Fantastic! Great work

I haven't fully tested, but the nesting looks perfect, assuming this isn't a single instance of nest that is too ID dependent. Will I be able to create a 2nd nest on the same page?

Konqueror/Ubuntu fails completely. For a browser that is supposed to be so standards compliant, it only fails 90% of the time. Still, the problem is probably not great. The failure seems total, so it's probably just some detect issue?

# Posted By wheezer | 6/18/07 9:49 PM

@wheezer, been a real long time since I was on a *nix box, so I couldn't tell you about the Konqueror issues. This example uses an ID selector, but it may be feasible to use a class selector. I've never tried it that way so I really can't say, but the tabs() method appears to work off the object returned by JQuery $('[myselector]'), then the method parses the list elements (which do appear to require IDs). Try it out, let me know what happens.

BTW, Klaus is a great help, and is quick to answer questions regarding the plugin.

# Posted By Cutter | 6/18/07 11:35 PM

@Wheezer - I just did a real quick, down-and-dirty test by applying a classname of 'tabset' to both of my tab container objects (the div#container and the form#section-1) and adjusting to call to the tabs() method to $('.tabset').tabs(), and it worked flawlessly. Then I removed the ID attribute from both containers and it still worked. Pretty cool stuff.

# Posted By Cutter | 6/18/07 11:54 PM

exelente, gran trabajo gracias !! por el plug

# Posted By ctraos | 12/5/07 9:03 AM

Is it possible to have the top row of tabs function on-click, but the second set of tabs function on-mouseover?

# Posted By paul Prusha | 1/12/08 7:21 PM

see http://www.smartmenus.org/forum/viewtopic.php?id=1...

Tabs Plugin conflicts with IE and smartmenus, but not FF. sure would be nice to have a workarund.

BTW, i visit nashville to visit family from time to time.

.

# Posted By Gene | 1/30/08 4:54 PM

@Gene - Honestly, I haven't looked at this Tabs implementation in quite a while. I'm pretty sure that Klaus now has it integrated into the Jquery UI library, which I am almost positive is cross browser.

We had very similar issues with using swfobject and JQuery. Basically, swfobject would programatically break IEs DOM when it rendered a Flash movie. This took quite a bit to discover, and even more to replace swfobject within our code. Chance are that you are running into a very similar issue.

# Posted By Steve 'Cutter' Blades | 2/4/08 9:42 PM

@Paul - I'm not certain if you are able to define which event handles tab activation. Fairly sure that it's strictly the 'click' event, but your best bet is to review the JQuery UI documentation on their site.

# Posted By Steve 'Cutter' Blades | 2/4/08 9:44 PM

thumbs up
thanks

# Posted By sumit | 4/10/08 1:05 PM

thumbs up

# Posted By okoy | 6/27/08 11:46 AM

Pretty cool stuff.

# Posted By Helena | 6/29/08 5:08 AM

hi,
thank u for gr8 post, but do there any way to mix or duplicate form1 again ? for ex. to be form1 & form2 & one and two tabs ? i try but i failed :(

# Posted By x | 7/10/08 10:22 PM

Great tabs; I've use these a couple different times! Do you think you can give me a hint as to how to nest tabs in more than just the first tab? I think this is the same request as x's above..

# Posted By brenda | 7/25/08 7:37 PM

Thank you!

# Posted By M@rtijn | 7/26/08 5:20 AM

A++

# Posted By Kay | 8/25/08 4:11 AM

First I have created in my code or not ?

# Posted By Boobe | 9/4/08 9:47 AM

exellent work, thank's for you contribution.

# Posted By Edder | 9/17/08 12:50 AM

Really nice to be here. thanks for such a nice work. keep it up.

# Posted By Emma | 9/18/08 11:31 AM

Works good, but when you try to move the <form> tag to encompass more tabs, this fails. Something happens, CSS fails somehow and you cannot see the second nest of tabs.

How can one move the <form> tag?

Also, the <ul> must be inside a <form> tag of they dont render right either.

-Jason

# Posted By Jason | 9/29/08 3:17 PM

@Jason -

Yeah, I put this tutorial out back in June of last year, and JQuery has already changed significantly, so this example may no longer apply. While I love JQuery for basic DOM manipulation, I've found ExtJS's component library to be much more comprehensive and consistent, so I haven't modified these older tutorials to use the latest versions of the JQuery library.

# Posted By Steve 'Cutter' Blades | 9/29/08 7:47 PM

I havent been able to display it properly eve though Im using a php host :S

# Posted By Martin | 10/4/08 7:43 AM

@Martin -

Well, that may be because you're using PHP;) If you want to post your (JQuery) code I can try to help you figure it out. Also, the JQuery group on Google Groups is an extremely active list.

# Posted By Steve 'Cutter' Blades | 10/4/08 8:49 AM

Steve,

I am not sure if you are aware. The tutorial on JQuery Nested Tab Set
with Demo is quite educative. I am in the process of downloading the
demo so to view but some of the folders are blank. I wondering if there is anyway you could provide the complete download in those
folders.
Thanks you.
George

# Posted By George | 11/18/08 4:24 PM

thanks

# Posted By Navaneeth Kumar | 12/1/08 4:45 AM

Does anybody know of a more lightweight jquery tabs plug-in that can be nested? I am not interested in jQuery UI.

# Posted By Korsakov | 12/12/08 12:23 PM

hi, can i have a form in each tab?? i have problems trying that.

# Posted By Miguel | 12/17/08 1:19 PM

doesnt work :(

# Posted By mcb | 2/1/09 8:55 AM

@mcb - The above example isn't working for you? What browser are you using? Or are you saying your implementation of this example isn't working?

The above is working fine for me. You can click on the tabs, etc. This example was also written a year and a half ago, and JQuery (and different plugins) has changed quite a bit, so I have no idea if this would work with 1.3.

# Posted By Steve 'Cutter' Blades | 2/2/09 9:53 AM

there's an nested example for jquery ui tabs here:

http://www.stilbuero.de/jquery/tabs_3/nested.html

# Posted By johan | 2/8/09 9:56 PM

nested example in previous post saved my day.

Till now i was trying to iniitialise the two tabs individually and the nested div was not at all correctly shown inside its container.

I had used $("#container").tabs() previously but in vain for nested divs. Changing that to $("#containder ul").tabs() solved the issue

# Posted By anand | 3/19/09 11:04 AM

very goog ,l like

# Posted By lhao | 4/24/09 5:50 AM

how do i select the nested tabs, lets say "step 2" dynamically? any ideas?

# Posted By jon | 5/1/09 1:29 PM

This is truly a great jQuery plugin. Thanks for sharing.

# Posted By TuVinhSoft | 7/23/09 4:29 PM

Very impressive, respect!
Thank you, I might use this one for my further projects...

# Posted By Lennart | 7/31/09 9:49 AM

Very Good !!...
I am studying JQuery ..o(?_?)o... Thanks !

# Posted By yurukai | 8/22/09 9:06 AM

Thanks very much for the post.

# Posted By Joe | 9/29/09 9:38 PM

JQuery has already changed significantly, so this example may no longer apply. While I love JQuery for basic DOM manipulation, I've found ExtJS's component library to be much more comprehensive and consistent,

# Posted By Sue | 10/14/09 4:44 PM

@Sue,

You are absolutely right, JQuery has changed a great deal since I wrote this. I'll also agree with you about ExtJs. There's a nested tab demo for Ext on this site too (also out of date).

# Posted By Steve 'Cutter' Blades | 10/14/09 4:50 PM

Thank you very much for this information. Good post thanks for sharing.

# Posted By petkim | 10/31/09 8:05 AM

Thumbs the thank you

# Posted By Araba Oyunlar? | 11/1/09 6:17 PM

very goog ,l like

# Posted By Hosting | 11/30/09 1:35 PM

exelente, gran trabajo gracias !! por el plug...

# Posted By mario | 1/6/10 8:53 PM

[Add Comment]