title: Nested Tab in Tab
body: <p>I have a problem with nested tabs. </p>
  
  <p>If you click on the first tab (ul.plaene li a) What I want is to load the first content of the nested tab.</p>
  
  <p>The html code is usually a PHP loop and I do not want to change the order.</p>
  
  <p>I have found yet no solution to this problem.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".stock li:first").addClass("current");
  $(".tab-inhalt:first").fadeIn();
  $(".tab-content:first").fadeIn();
  
  $(".plaene a").click(function(event) {
    event.preventDefault();
    $(this).parent().addClass("current");
    $(this).parent().siblings().removeClass("current");
    var tab = $(this).attr("href");
    $(".tab-content").not(tab).css("display", "none");
    $(tab).fadeIn();
  });
  
  $(".reiter a").click(function(event) {
    event.preventDefault();
    $(this).parent().addClass("current");
    $(this).parent().siblings().removeClass("current");
    var tab = $(this).attr("href");
    $(".tab-inhalt").not(tab).css("display", "none");
    $(tab).fadeIn();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tab-content,
  .tab-inhalt {
    display: none;
  }
  .stock li {
    text-decoration: none;
    list-style: none;
    display: inline-block;
    margin: 0 20px 0 0;
  }
  .stock a {
    color: #0094cd;
    text-decoration: none;
    list-style: none;
  }
  .stock li.current a {
    color: #4c565c;
  }
  .plaene a.current {
    color: #4c565c;
  }
  .tab-alles {
    width: 100%;
    background-color: #f1f2f4;
    margin-top: 15px;
  }
  .tab-oben li {
    text-decoration: none;
    list-style: none;
    display: inline-block;
    margin: 0;
    background-color: #f1f2f4;
  }
  .tab-oben a {
    color: #0094cd;
    text-decoration: none;
    list-style: none;
    padding: 14px 20px;
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="stock"&gt;
    &lt;ul class="plaene"&gt;
      &lt;li class="current"&gt;&lt;a href="#objekttabs1"&gt;Untergeschoss&lt;/a&gt;&lt;/li&gt;
      &lt;li class=""&gt;&lt;a href="#objekttabs2"&gt;Erdgeschoss&lt;/a&gt;&lt;/li&gt;
      &lt;li class=""&gt;&lt;a href="#objekttabs3"&gt;1. Stock&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt; &lt;!-- End: .stock --&gt;
  
  &lt;div class="tab-alles"&gt;
    &lt;div class="tab-oben"&gt;
      &lt;div id="objekttabs1" class="tab-content"&gt;
        &lt;ul class="reiter"&gt;
          &lt;li class="current"&gt;&lt;a href="#wohnunginhalt1"&gt;Gesamtfläche&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div id="objekttabs2" class="tab-content"&gt;
        &lt;ul class="reiter"&gt;
          &lt;li class=""&gt;&lt;a href="#wohnunginhalt2"&gt;Gesamtfläche&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#wohnunginhalt3"&gt;Wohnung 1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#wohnunginhalt4"&gt;Wohnung 2&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;div id="objekttabs3" class="tab-content"&gt;
        &lt;ul class="reiter"&gt;
          &lt;li&gt;&lt;a href="#wohnunginhalt5"&gt;Wohnung 3&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt; &lt;!-- End: .tab-oben --&gt;
    
    &lt;div class="tab-inhalt-all"&gt;
      &lt;div id="wohnunginhalt1" class="tab-inhalt"&gt;
        &lt;div class="content"&gt;Content1&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="wohnunginhalt2" class="tab-inhalt"&gt;
        &lt;div class="content"&gt;Content2&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="wohnunginhalt3" class="tab-inhalt"&gt;
        &lt;div class="content"&gt;Content3&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="wohnunginhalt4" class="tab-inhalt"&gt;
        &lt;div class="content"&gt;Content4&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="wohnunginhalt5" class="tab-inhalt"&gt;
        &lt;div class="content"&gt;Content5&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt; &lt;!-- End: .tab-inhalt-all --&gt;</code></pre>
  </div>
  </div>
  </p>