I have a need for 2 levels of tabs. I am currently using YUI's TabView
building out my main tabs from JavaScript and my 2nd-level tabs using
markup. The trouble is that my 2nd level tabs do not split out the
content into individual tabs (all tab content shows up in the default
tab) and clicking on the tabs do not change the tab view to the
clicked tab's content. Here's the code I'm working with
<div id="container"></div>
<script type="text/javascript">
(function() {
var tabView = new YAHOO.widget.TabView();
tabView.addTab( new YAHOO.widget.Tab({
label: 'My Content',
dataSrc: '../inc/mycontent.php',
cacheData: true
}));
tabView.addTab( new YAHOO.widget.Tab({
label: 'Nested Tabs',
dataSrc: '../inc/nested_tabs.php',
cacheData: true,
active: true
}));
tabView.appendTo('container');
})();
</script>
In my nested_tabs.php file I have the following:
<div id="mydemo" class="yui-navset">
<ul class="yui-nav">
<li class="selected"><a href="#tab10"><em>Tab One Label</em></a></li>
<li><a href="#tab20"><em>Tab Two Label</em></a></li>
<li><a href="#tab30"><em>Tab Three Label</em></a></li>
</ul>
<div class="yui-content">
<div id="tab10"><p>Tab One Content</p></div>
<div id="tab20"><p>Tab Two Content</p></div>
<div id="tab30"><p>Tab Three Content</p></div>
</div>
</div>
<script>
(function() {
var tabView2 = new YAHOO.widget.TabView('mydemo');
})();
</script>
Can anyone help me figure out why my 2nd-level tabs are not
functioning properly? Also, I have tried building my 2nd-level tabs
using JavaScript, but that did not work either, infact the 2nd-level
tabs built using JavaScript did not even render.
Lastly, I tried using Dav Glass's nested tab code
(http://blog.davglass.com/files/yui/tab6/) but could not reproduce his
example.
PS: Sorry I do not have an online version available to demo.
Thanks for the help!
_rs