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..