Hello. I am trying to have a simple interface on my website, where I have tabs within tabs. Basically, I have a bunch of tabs for a group of guns (light machine guns, sub machine guns, etc.). Then, in every sub group, I want another set of tabs with specific guns (ak47, aug, galil, etc.).
In a nutshell, I am trying to get tabs within tabs. The javascript should be sound, but it is more of how do I label the different classes and ids.
The first part of my code works. I have all of the first level of tabs working. However, only the first tab in the "nested tabs" works. The 2nd tab in the "nested tabs" does not work.
I just need to know what to set the last javascript snippet to.
1. Should the variable be 'tabber3'?
2. What should the id value be?
3. What should the tabclass value be?
After that, what part of the code do I change to match those changes to make it work?
Thank you very much for your help. It is greatly appreciated!
<div id="tab-container-1">
<ul id="tab-container-1-nav" class="tablayout">
<li>
<a href="#tab1">Assault Rifles</a>
</li>
<li>
<a href="#tab2">Light Machine Guns</a>
</li>
<li>
<a href="#tab3">Sub Machine Guns</a>
</li>
</ul>
<div class="tab" id="tab1">
<div id="demo-nested" class="demolayout">
<ul id="demo-nested-nav" class="demolayout">
<li>
<a href="#">AK-47</a>
</li>
<li>
<a href="#">AUG</a>
</li>
</ul>
<div class="tabs-container">
<div class="tab-nested">
<h2>AK-47</h2>
<p class="km-def"></p>
</div>
<div class="tab-nested">
<h2>AUG</h2>
<p class="km-def"></p>
</div>
</div>
</div>
</div>
<div class="tab" id="tab1">
<div id="demo-nested" class="demolayout">
<ul id="demo-nested-nav" class="demolayout">
<li>
<a href="#">AK-47</a>
</li>
<li>
<a href="#">AUG</a>
</li>
</ul>
<div class="tabs-container">
<div class="tab-nested">
<h2>AK-47</h2>
<p class="km-def"></p>
</div>
<div class="tab-nested">
<h2>AUG</h2>
<p class="km-def"></p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var tabber1 = new Yetii({
id : 'tab-container-1'
});
</script>
<script type="text/javascript">
var tabber2 = new Yetii({
id : 'demo-nested',
tabclass : 'tab-nested',
});
</script>
<script type="text/javascript">
var tabber3 = new Yetii({
id : '??',
tabclass : '??',
});
</script>
