title: Javascript Tabs
body: <p>I need some help getting these tabs to work. I've created header tabs for navigation on a school project I'm working on. I also created tabs on a table to help the user navigate the table as such:</p>
  
  <p><a href="https://i.stack.imgur.com/w2pDe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/w2pDe.png" alt="enter image description here"></a></p>
  
  <p>For some reason when I click on the table tabs "all"/"authorized software"/"equipment" they disappear and the corresponding table information appears like this: </p>
  
  <p><a href="https://i.stack.imgur.com/o6P2S.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/o6P2S.png" alt="enter image description here"></a></p>
  
  <p>I've tried everything but I can not seem to solve the problem. This is my javascript code:</p>
  
  <pre><code>function openTab(evt, TabName) {
      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(TabName).style.display = "block";
      evt.currentTarget.className += " active"; 
  }
  </code></pre>
  
  <p>And this is the corresponding HTML:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div&gt;
      &lt;center&gt;
        &lt;img src="C:\Users\Fatu.Khalid\Documents\Computerscience\logo.png"&gt;
      &lt;/center&gt;
    &lt;/div&gt;
  
    &lt;div class="tab"&gt;
      &lt;button class="tablinks" onclick="openTab(event, 'Home')"&gt;
        &lt;font color="white"&gt;Home&lt;/font&gt;
      &lt;/button&gt;
      &lt;button class="tablinks" onclick="openTab(event, 'New')"&gt;
        &lt;font color="white"&gt;New&lt;/font&gt;
      &lt;/button&gt;
      &lt;button class="tablinks" onclick="openTab(event, 'Calls')"&gt;
        &lt;font color="white"&gt;Calls&lt;/font&gt;
      &lt;/button&gt;
      &lt;button class="tablinks" onclick="openTab(event, 'Specialist')"&gt;
        &lt;font color="white"&gt;Specialist&lt;/font&gt;
      &lt;/button&gt;
      &lt;button class="tablinks" onclick="openTab(event, 'Equipment')"&gt;
        &lt;font color="white"&gt;Equipment&lt;/font&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  
    &lt;div id="Equipment" class="tabcontent"&gt;
      &lt;input type='text' class='search' /&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;div class="secondtabs"&gt;
        &lt;button class="tablinks" onclick="openTab(event, 'All')" style="margin: 1px;         width:10%;"&gt;All&lt;/button&gt;
        &lt;button class="tablinks" onclick="openTab(event, 'Authorised Software')" style="margin: 1px; width: 15%;"&gt;Authorised
          Software&lt;/button&gt;
        &lt;button class="tablinks" onclick="openTab(event, 'EquipmentPage')" style="margin: 1px; width: 12%;"&gt;Equipment&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id='All' class='tabcontent' style="background-color: #ffe866;"&gt;
      &lt;li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"&gt;Name
        Microsoft office&lt;/li&gt;
      &lt;li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"&gt;Name:
        Desktop Monitor&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbsp&amp;nbspSerial number: 8302730280&lt;/li&gt;
      &lt;li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"&gt;&lt;/li&gt;
      &lt;li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"&gt;&lt;/li&gt;
      &lt;li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"&gt;&lt;/li&gt;
    &lt;/div&gt;
  
    &lt;div id='Authorised Software' class='tabcontent' style="background-color: #ffe866;"&gt;
      &lt;li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"&gt;&lt;/li&gt;
      &lt;li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"&gt;&lt;/li&gt;
      &lt;li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"&gt;&lt;/li&gt;
      &lt;li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"&gt;&lt;/li&gt;
      &lt;li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"&gt;&lt;/li&gt;
    &lt;/div&gt;
  
    &lt;div id='EquipmentPage' class='tabcontent' style="background-color: #ffe866;"&gt;
      &lt;li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"&gt;&lt;/li&gt;
      &lt;li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"&gt;&lt;/li&gt;
      &lt;li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"&gt;&lt;/li&gt;
      &lt;li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"&gt;&lt;/li&gt;
      &lt;li style="border: solid; border-width: thin; border-color: none; border-radius: 5px 5px 5px 5px; height: 30px; background-color:white;"&gt;&lt;/li&gt;
    &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>