title: Multitabs jquery: how do I show first element in each subtab?
body: <p>I'm trying to use nested tabs ( like here: <a href="http://jsfiddle.net/joe_b/6yQ8k/33/" rel="nofollow">JSFIDDLE</a> ) on a page but I have a problem, I can't figure out how to show the first sub-tab and hide the others when I select a tab. Thanks in advance.<br/>
  My code:</p>
  
  <pre><code>jQuery(function(){
  jQuery('.nav-tab').click(function(){
        jQuery('.tabs').hide();
        jQuery('#tab-'+$(this).attr('target')).fadeIn(350);
  });
  jQuery('.sub-nav').click(function(){
        jQuery('.sub-tab').hide();
        jQuery('#sub'+$(this).attr('target')).fadeIn(350);
  });
  </code></pre>
  
  <p>});</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;ul id="nav-box"&gt;
    &lt;li&gt;&lt;a class="nav-tab" target="1"&gt;tab1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="nav-tab" target="2"&gt;tab2&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a class="nav-tab" target="3"&gt;tab3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class="tabs" id="tab-1"&gt;
    &lt;div class="left-col"&gt;
      &lt;ul class="sub-list"&gt;
         &lt;li&gt;&lt;a class="sub-nav" target="tab1"&gt;subnav1&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a class="sub-nav" target="tab2"&gt;subnav2&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a class="sub-nav" target="tab3"&gt;subnav3&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="sub-tab" id="subtab1"&gt;sub tab 1&lt;/div&gt;
    &lt;div class="sub-tab" id="subtab2"&gt;sub tab 2&lt;/div&gt;
    &lt;div class="sub-tab" id="subtab3"&gt;sub tab 3&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="tabs" id="tab-2"&gt;
    &lt;div class="left-col"&gt;
      &lt;ul class="sub-list"&gt;
        &lt;li&gt;&lt;a class="sub-nav" target="tab4"&gt;subnav4&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class="sub-nav" target="tab5"&gt;subnav5&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class="sub-nav" target="tab6"&gt;subnav6&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="sub-tab" id="subtab4"&gt;sub tab 4&lt;/div&gt;
    &lt;div class="sub-tab" id="subtab5"&gt;sub tab 5&lt;/div&gt;
    &lt;div class="sub-tab" id="subtab6"&gt;sub tab 6&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="tabs" id="tab-3"&gt;
    &lt;div class="left-col"&gt;
      &lt;ul class="sub-list"&gt;
        &lt;li&gt;&lt;a class="sub-nav" target="tab7"&gt;subnav7&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class="sub-nav" target="tab8"&gt;subnav8&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class="sub-nav" target="tab9"&gt;subnav9&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="sub-tab" id="subtab7"&gt;sub tab 7&lt;/div&gt;
    &lt;div class="sub-tab" id="subtab8"&gt;sub tab 8&lt;/div&gt;
    &lt;div class="sub-tab" id="subtab9"&gt;sub tab 9&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and styles:</p>
  
  <pre><code>#nav-box li       {display:inline;list-style-type:none;}
  .nav-tab,.sub-nav {cursor:pointer;margin:0 20px;}
  .tabs             {display:none;}
  .left-col         {float:left;}
  .sub-tab          {position:relative;top:10px;left:40px;z-index:-1;}
  </code></pre>