Using YUI to Create Nested Tabs

Recently, I was browsing the YUI JavaScript forums and found a post about nesting the tab control. I haven’t done that before personally, but have done things where my tabs had Ajax or DHTML dependencies inside the tabs. I decided I’d take a whack at this one and see what I could come up with.

To start, I’ll use the YUI Loader so I don’t have to include all the dependencies myself. You could of course simply include the relevant files from the YUI Tab Control.

The JavaScript/Styles

<script src="http://yui.yahooapis.com/2.5.1/build/yuiloader/yuiloader-beta-min.js"></script>
<script src="http://yui.yahooapis.com/2.5.1/build/yuiloader/yuiloader-beta-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/event/event-min.js"></script>
<script type="text/javascript">
 var loader=new YAHOO.util.YUILoader({
  require:['tabview'],
  onSuccess:function(){
   new YAHOO.widget.TabView('demo');
   new YAHOO.widget.TabView('subdemo',{'orientation':'left'});
  }
});
YAHOO.util.Event.onDOMReady(function(){loader.insert();});
</script>
<!-- For this demo only... to make it look better -->
<style type="text/css">
#demo ul { margin: 0pt; }
#demo .yui-content { height: 300px;}
#subdemo .yui-content { height: 200px; }
</style>

A couple notes:

  1. For this example, I didn’t use a dataSrc attribute to load content for the tabs dynamically. Suppose you wanted to load all your tabs dynamically, but the 3rd tab was going to have a tab control nested. Instead of creating the tabs both at the same time, you’d have to create the subtabs each time the dynamic tab’s content was loaded. You can look more into the activeChange event for the tab control.
  2. If you do have dynamic content on the subtabs, the javascript for those tabs needs to be included in the parent page.

The HTML

<div id=”demo” class=”yui-navset”>
<ul class=”yui-nav”>
<li class=”selected”><a href=”#tab1″><em>Tab One Label</em></li>
<li><a href=”#tab2″><em>Tab Two Label</li>
<li><a href=”#tab3″><em>Tab Three Label</li>
</ul>
<div class=”yui-content”>
<div><p>Tab One Content</p></div>
<div><p>Tab Two Content</p></div>
<div>

<div id=”subdemo” class=”yui-navset”>
<ul class=”yui-nav”>
<li class=”selected”><a href=”#tab1″><em>Tab One Label</em></a></li>
<li><a href=”#tab2″><em>Tab Two Label</em></a></li>
<li><a href=”#tab3″><em>Tab Three Label</em></a></li>
</ul>
<div class=”yui-content”>
<div><p>SubTab One Content</p></div>
<div><p>SubTab Two Content</p></div>
<div><p>SubTab Three Content</p></div>
</div>
</div>

</div>
</div>
</div>

In Action..

Tab one and tab two just have normal content. The content on the 3rd tab however, is another tab control.

Tab Two Content

SubTab One Content

SubTab Two Content

SubTab Three Content

This entry was posted in Programming, Web and tagged , , , , . Bookmark the permalink.

10 Responses to Using YUI to Create Nested Tabs

  1. Dan says:

    I am having an issue where this is working great in Firefox but I cannot get it to work properly in IE. Would you be willing to take a look and see if I am missing something simple? Please send me an email and I will give you the URL. Thanks

  2. iroshads says:

    ohh thanx a lot………..just the thing i was searching

  3. Anwar says:

    thanks…it helped me a lot !

  4. Pingback: Developer’s Snacks: Exploration on Web Tab Modules | Onextrapixel - Showcasing Web Treats Without Hitch

  5. Suresh N says:

    Is there a way to fire event on adding new tab in YUI. I am not able to find it anywhere.

  6. Dennis says:

    Been a while since I played with these. You’d probably have better response asking on the YUI forum. The API docs list all the available events too though.

  7. Divya says:

    Hey it is a nice one..
    But I have an issue with nested tabs.. on a post back in the nested tab, the selected tab changes. How do I retain the selected tabs on post back too!!!

  8. Dennis says:

    I suppose you could do it with an additional custom Javascript. Just duplicate how they do it for the top level.

  9. Raj says:

    I just want to know how we can implement this without using online code.. i mean how to get JS and css files into local and how to modify those to work perfectly.. plz help..

  10. Dennis says:

    I’m not sure what you mean. All js/html/css can operate on your local computer as easy as it could off of a web server if that is what you’re getting at. This script requires no online backend. You’d of course have to download the YUI files instead of using them from the Yahoo hosted servers.

Comments are closed.