title: Tabs using Div in HTML
body: <p>I am trying to create sub tabs using DIV.<br>
  I can view the tabs and sub tabs with the code. Also clicking on main tab is working. But unfortunately sub tabs are not working, 
  It seems like the code issue . 
  I am struggling to find the issue. any help will be highly appreciated. 
  thanks in advance.</p>
  
  <p>Code is actually based on the W3 schools 
  <a href="https://www.w3schools.com/howto/howto_js_tabs.asp" rel="nofollow noreferrer">w3schools</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function openCity(evt, cityName) {
      var i, tabcontent, tablinks;
      tabcontent = document.getElementsByClassName("tabcontent");
      for (i = 0; i &lt; tabcontent.length; i++) {
          tabcontent[i].style.display = "none";
      }
      tablinks = document.getElementsByClassName("tablinks");
      for (i = 0; i &lt; tablinks.length; i++) {
          tablinks[i].className = tablinks[i].className.replace(" active", "");
  
      }
      document.getElementById(cityName).style.display = "block";
    
  
  
      evt.currentTarget.className += " active";
  }
  
  var name = '0';
  
  document.getElementById(name).click();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
         background-image: url("Images/MainBackground.jpeg");
      background-color: #2980B9;
          background-size: 100% 750px;
  
    font-family: 'Roboto', sans-serif;
    
  }
  
      
      
      /* Style the tab */
  .tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
  }
  
  /* Style the buttons inside the tab */
  .tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
      font-size: 17px;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
      background-color: #ddd;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
      background-color: #ccc;
  }
  
  /* Style the tab content */
  .tabcontent {
      display: none;
      padding: 6px 12px;
      -webkit-animation: fadeEffect 1s;
      animation: fadeEffect 1s;
  }
  
  /* Fade in tabs */
  @-webkit-keyframes fadeEffect {
      from {opacity: 0;}
      to {opacity: 1;}
  }
  
  @keyframes fadeEffect {
      from {opacity: 0;}
      to {opacity: 1;}
  }
  
  #main {
      width: 70px;
      height: 300px;
      border: 1px solid #c3c3c3;
      display: -webkit-flex;
      display: flex;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-align-content: center;
      align-content: center;
  }
  
  #main div {
      width: 70px;
      height: 70px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="tab"&gt;
       &lt;button class="tablinks" id='0' onclick="openCity(event, 'Sales')"&gt;Sales&lt;/button&gt; 
      
        &lt;button class="tablinks" id='1' onclick="openCity(event, 'Costs')"&gt;Costs&lt;/button&gt;
              &lt;button class="tablinks" id='2' onclick="openCity(event, 'Expenses')"&gt;Expenses&lt;/button&gt;
          &lt;button class="tablinks" id='3' onclick="openCity(event, 'Inventory')"&gt;Inventory&lt;/button&gt;
    &lt;button class="tablinks" id='4' onclick="openCity(event, 'Products')"&gt;Products&lt;/button&gt;
      &lt;button class="tablinks" id='5' onclick="openCity(event, 'Customers')"&gt;Customers&lt;/button&gt; 
     &lt;button class="tablinks" id='6' onclick="openCity(event, 'Performance Reports')"&gt;Business Insights&lt;/button&gt;
        &lt;button class="tablinks" id='7' onclick="openCity(event, 'Administration')"&gt;Administration&lt;/button&gt;
  
    &lt;/div&gt;
  
    
  &lt;div id="Products" class="tabcontent"&gt;    
    &lt;h3&gt;Products&lt;/h3&gt;
    
         
        
         
        &lt;/div&gt;
  &lt;div id="Sales" class="tabcontent"&gt;    
    &lt;h3&gt;Sales&lt;/h3&gt;
    
       
         
        &lt;div class="tab"&gt;
    &lt;button class="tablinks" onclick="openCity(event, 'SaleDetail')"&gt;Sale Detail&lt;/button&gt;
    &lt;button class="tablinks" onclick="openCity(event, 'SaleSummary')"&gt;Sale Summary&lt;/button&gt;
    &lt;button class="tablinks" onclick="openCity(event, 'SaleHistory')"&gt;Sale History&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;div id="SaleDetail" class="tabcontent"&gt;
   test     
  &lt;/div&gt;
  
  &lt;div id="SaleSummary" class="tabcontent"&gt;
      
  test2       
  &lt;/div&gt;
  &lt;div id="SaleHistory" class="tabcontent"&gt;
  Test3
  &lt;/div&gt;
         
         
         
         &lt;br&gt;
         
         
         
         
  &lt;/div&gt;
  
  &lt;div id="Customers" class="tabcontent"&gt;
    &lt;h3&gt;Customers&lt;/h3&gt;
    
    
      
  
         &lt;/div&gt;
  
  &lt;div id="Costs" class="tabcontent"&gt;
    &lt;h3&gt;Costs&lt;/h3&gt;
    
      
     
  &lt;/div&gt;
  &lt;div id="Expenses" class="tabcontent"&gt;
    &lt;h3&gt;Expenses&lt;/h3&gt;
    
    
  &lt;/div&gt;
  &lt;div id="Inventory" class="tabcontent"&gt;
    &lt;h3&gt;Inventory&lt;/h3&gt;
       
         
        
         
  &lt;/div&gt;
  &lt;div id="PerformanceReports" class="tabcontent"&gt;
    &lt;h3&gt;Performance Reports&lt;/h3&gt;
  Analyze business performance
  &lt;/div&gt;
         
         
         
         &lt;div id="Administration" class="tabcontent"&gt;
    &lt;h3&gt;Administration&lt;/h3&gt;
   
         
         
         
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>