title: Opening Sub Tab On Clicking Parent
body: <p>I have the following code to display tabbed content.</p>
  
  <p>At the moment clicking '#tabs1' shows the sub links, but the user has to click '#sub1' for the content to display.</p>
  
  <p>When '#tabs1' is clicked, I'd like the first subtab ('#sub1') of that section to be displayed automatically. Any ideas how I would achieve this?</p>
  
  <pre><code>&lt;nav class="inner-nav top"&gt;
          &lt;ul&gt;
  
              &lt;li&gt;&lt;a href="#tabs1"&gt;Tabs One&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tabs2"&gt;Tabs Two&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt;
      &lt;/nav&gt;
  
      &lt;!-- Tabs #1 Begin --&gt;
  
      &lt;section class="tab-content" id="tabs1"&gt;
  
          &lt;nav class="inner-nav sub"&gt;
              &lt;ul&gt;
  
                  &lt;li&gt;&lt;a href="#1sub1"&gt;Sub Tab1 One&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#1sub2"&gt;Sub Tab1 Two&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
          &lt;/nav&gt;
  
          &lt;section class="tab-content" id="1sub1"&gt;
  
              // Sub Tab One Content
  
          &lt;/section&gt;
  
          &lt;section class="tab-content" id="1sub2"&gt;
  
              // Sub Tab Two Content
  
          &lt;/section&gt;
  
      &lt;/section&gt;
  
      &lt;!-- Tabs #1 End --&gt;
  
  
      &lt;!-- Tabs #2 Begin --&gt;
  
      &lt;section class="tab-content" id="tabs2"&gt;
  
          &lt;nav class="inner-nav sub"&gt;
              &lt;ul&gt;
  
                  &lt;li&gt;&lt;a href="#2sub1"&gt;Sub Tab2 One&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#2sub2"&gt;Sub Tab2 Two&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
          &lt;/nav&gt;
  
          &lt;section class="tab-content" id="2sub1"&gt;
  
              // Sub Tab2 One Content
  
          &lt;/section&gt;
  
          &lt;section class="tab-content" id="2sub2"&gt;
  
              // Sub Tab2 Two Content
  
          &lt;/section&gt;
  
      &lt;/section&gt;
  
      &lt;!-- Tabs #2 End --&gt;
  </code></pre>
  
  <p>////  jQuery:</p>
  
  <pre><code>&lt;script&gt;
  
          jQuery(function () {
          jQuery(".tab-content").hide().first().show();
          jQuery(".inner-nav li:first").addClass("active");
  
          jQuery(".inner-nav a").on('click', function (e) {
              e.preventDefault();
              jQuery(this).closest('li').addClass("active").siblings().removeClass("active");
              jQuery(jQuery(this).attr('href')).show().siblings('.tab-content').hide();
          });
  
          var hash = jQuery.trim( window.location.hash );
  
          if (hash) jQuery('.inner-nav a[href$="'+hash+'"]').trigger('click');
  
          if (location.hash) {
    setTimeout(function() {
  
      window.scrollTo(0, 0);
    }, 1);
  }
  
          });
  
      &lt;/script&gt;
  </code></pre>