title: Bootstrap nested tabs with dropdown navigation from parent tabs
body: <p>I've created tabs with nested sub-tabs. I'd like to be able to navigate to the sub-tab from the parent navigation menu dropdown. I'm not sure how to do this, and what I've tried doesn't work.</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;h2&gt;Nest tabs with submenus&lt;/h2&gt;
    &lt;ul class="nav nav-tabs"&gt;
      &lt;li class="active"&gt;&lt;a data-toggle="tab" href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-toggle="tab" href="#tab1"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
      &lt;li class="dropdown"&gt;
       &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;Tab 1 (menu)
       &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
       &lt;ul class="dropdown-menu"&gt;
        &lt;li&gt;&lt;a data-toggle="tab" href="#subtab1"&gt;Submenu 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a data-toggle="tab" href="#subtab2"&gt;Submenu 2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a data-toggle="tab" href="#subtab3"&gt;Submenu 3&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
      &lt;/li&gt;    
      &lt;li&gt;&lt;a data-toggle="tab" href="#tab2"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a data-toggle="tab" href="#tab3"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  
    &lt;div class="tab-content"&gt;
      &lt;div id="home" class="tab-pane fade in active"&gt;
        &lt;h3&gt;HOME&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div id="tab1" class="tab-pane fade"&gt;
        &lt;h3&gt;Tab 1&lt;/h3&gt;
        &lt;ul class="nav nav-tabs"&gt;
          &lt;li class="active"&gt;&lt;a data-toggle="tab" href="#subtab1"&gt;subtab 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a data-toggle="tab" href="#subtab2"&gt;subtab 2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a data-toggle="tab" href="#subtab3"&gt;subtab 3&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;      
        &lt;div class="tab-content"&gt;
          &lt;div id="subtab1" class="tab-pane fade"&gt;
            &lt;h3&gt;subtab 1&lt;/h3&gt;
            &lt;p&gt;Some content in subtab 1.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="subtab2" class="tab-pane fade"&gt;
            &lt;h3&gt;subtab 2&lt;/h3&gt;
            &lt;p&gt;Some content in subtab 2.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="subtab3" class="tab-pane fade"&gt;
            &lt;h3&gt;subtab 3&lt;/h3&gt;
            &lt;p&gt;Some content in subtab 3.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="tab2" class="tab-pane fade"&gt;
        &lt;h3&gt;tab 2&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div id="tab3" class="tab-pane fade"&gt;
        &lt;h3&gt;tab 3&lt;/h3&gt;
        &lt;div id="activate-home-tab" style="color:blue; cursor:pointer;"&gt;open home tab&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The <a href="https://jsfiddle.net/ebfh99vn/" rel="nofollow noreferrer">fiddle</a>.</p>