title: Can't click on other tabs in html tabcontent
body: <p>Whenever I am on my new profile tab I can't click on my other tabs to go to them. I've included my code below. I can go from my Dashboard tab to New Profile tab fine but not the other way around. I can also go from New Task to New Profile just fine the only exception is when I go out from New Profile to another tab.</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>document.getElementById("defaultOpen").click();
  
  function openCity(evt, cityName) {
    // Declare all variables
    var i, tabcontent, tablinks;
  
    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i &lt; tabcontent.length; i++) {
      tabcontent[i].style.display = "none";
    }
  
    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i &lt; tablinks.length; i++) {
      tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
  
    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
    console.log("hello");
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>label {
    display: inline-block;
    width: 140px;
    text-align: right;
  }
  
  input {
    width: 140px
  }
  
  select {
    width: 140px;
  }
  
  
  /* Split the screen in half */
  
  .split {
    height: 100%;
    width: 50%;
    position: fixed;
    z-index: 1;
    top: 0;
    overflow-x: hidden;
    padding-top: 20px;
  }
  
  
  /* If you want the content centered horizontally and vertically */
  
  .centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  
  
  /* Control the left side */
  
  .left {
    left: 0;
    /*background-color: #111; */
  }
  
  
  /* Control the right side */
  
  .right {
    right: 0;
    /*background-color: red; */
  }
  
  
  /* Style the tab */
  
  .tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    position: relative;
    clear: both;
  }
  
  
  /* Style the buttons that are used to open the tab content */
  
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
  }
  
  
  /* 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: 1280px 720px;
    border: 1px solid #ccc;
    border-top: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;title&gt;Document&lt;/title&gt;
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;!-- For the tab headers--&gt;
    &lt;div class="tab"&gt;
      &lt;button class="tablinks" onclick="openCity(event, 'ProfileTab')"&gt;New Profile&lt;/button&gt;
      &lt;button class="tablinks" onclick="openCity(event, 'TaskTab')" id="defaultOpen"&gt;New Task&lt;/button&gt;
      &lt;button class="tablinks" onclick="openCity(event, 'DashboardTab')"&gt;Dashboard&lt;/button&gt;
    &lt;/div&gt;
  
  
    &lt;div id="ProfileTab" class="tabcontent"&gt;
      &lt;!-- Shipping and billing details will be on left half of screen. --&gt;
      &lt;div class="split left"&gt;
        &lt;!-- Shipping Details --&gt;
        &lt;h1&gt;Shipping Details&lt;/h1&gt;
        &lt;div class="block"&gt;
          &lt;label for="firstNameTextFieldShip"&gt;First Name:&lt;/label&gt;
          &lt;input type="text" id="firstNameTextFieldShip" name="firstNameShip"&gt;
  
  
          &lt;label for="lastNameTextFieldShip"&gt;Last Name:&lt;/label&gt;
          &lt;input type="text" id="lastNameTextFieldShip" name="lastNameShip"&gt;
        &lt;/div&gt;
  
        &lt;br&gt;
  
        &lt;div class="block"&gt;
          &lt;label for="Address1TextFieldShip"&gt;Address:&lt;/label&gt;
          &lt;input type="text" id="Address1TextFieldShip" name="add1txtfieldShip"&gt;
  
          &lt;label for="Address2TextField"&gt;Address 2:&lt;/label&gt;
          &lt;input type="text" id="Address2TextFieldShip" name="add2txtfieldShip"&gt;
        &lt;/div&gt;
  
        &lt;br&gt;
  
        &lt;div class="block"&gt;
          &lt;label for="ZipTextFieldShip"&gt;Zip Code:&lt;/label&gt;
          &lt;input type="text" id="ZipTextFieldShip" name="ziptxtfieldShip"&gt;
  
          &lt;label for="CityTextFieldShip"&gt;City:&lt;/label&gt;
          &lt;input type="text" id="CityTextFieldShip" name="citytxtfieldShip"&gt;
        &lt;/div&gt;
  
        &lt;br&gt;
  
        &lt;div class="block"&gt;
          &lt;label for="CountriesSelectShip"&gt;Country:&lt;/label&gt;
          &lt;select id="CountriesSelectShip"&gt;
            &lt;option value="USA"&gt;USA&lt;/option&gt;
          &lt;/select&gt;
  
          &lt;label for="StateTextFieldShip"&gt;State:&lt;/label&gt;
          &lt;input type="text" id="StateTextFieldShip" name="statetxtfieldShip"&gt;
        &lt;/div&gt;
  
  
  
        &lt;!-- Billing Details--&gt;
        &lt;h1&gt;Billing Details&lt;/h1&gt;
        &lt;div class="block"&gt;
          &lt;label for="firstNameTextFieldBilling"&gt;First Name:&lt;/label&gt;
          &lt;input type="text" id="firstNameTextFieldBilling" name="firstNameBilling"&gt;
  
  
          &lt;label for="lastNameTextFieldBilling"&gt;Last Name:&lt;/label&gt;
          &lt;input type="text" id="lastNameTextFieldBilling" name="lastNameBilling"&gt;
        &lt;/div&gt;
  
        &lt;br&gt;
  
        &lt;div class="block"&gt;
          &lt;label for="Address1TextFieldBilling"&gt;Address:&lt;/label&gt;
          &lt;input type="text" id="Address1TextFieldBilling" name="add1txtfieldBilling"&gt;
  
          &lt;label for="Address2TextFieldBilling"&gt;Address 2:&lt;/label&gt;
          &lt;input type="text" id="Address2TextFieldBilling" name="add2txtfieldBilling"&gt;
        &lt;/div&gt;
  
        &lt;br&gt;
  
        &lt;div class="block"&gt;
          &lt;label for="ZipTextFieldBilling"&gt;Zip Code:&lt;/label&gt;
          &lt;input type="text" id="ZipTextFieldBilling" name="ziptxtfieldBilling"&gt;
  
          &lt;label for="CityTextFieldBilling"&gt;City:&lt;/label&gt;
          &lt;input type="text" id="CityTextFieldBilling" name="citytxtfieldBilling"&gt;
        &lt;/div&gt;
  
        &lt;br&gt;
  
        &lt;div class="block"&gt;
          &lt;label for="CountriesSelectBilling"&gt;Country:&lt;/label&gt;
          &lt;select id="CountriesSelectBilling"&gt;
            &lt;option value="USA"&gt;USA&lt;/option&gt;
          &lt;/select&gt;
  
          &lt;label for="StateTextFieldBilling"&gt;State:&lt;/label&gt;
          &lt;input type="text" id="StateTextFieldBilling" name="statetxtfieldBilling"&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="split right"&gt;
  
        &lt;h1&gt;Payment Information&lt;/h1&gt;
        &lt;div class="block"&gt;
          &lt;label for="ProfileNameTextField"&gt;Profile Name:&lt;/label&gt;
          &lt;input type="text" id="ProfileNameTextField" name="profileNameTextField"&gt;
        &lt;/div&gt;
  
        &lt;br&gt;
  
        &lt;div class="block"&gt;
          &lt;label for="EmailTextField"&gt;Email:&lt;/label&gt;
          &lt;input type="text" id="EmailTextField" name="emailTextField"&gt;
        &lt;/div&gt;
  
        &lt;br&gt;
  
        &lt;div class="block"&gt;
          &lt;label for="PhoneNumTextField"&gt;Phone Number:&lt;/label&gt;
          &lt;input type="text" id="PhoneNumTextField" name="PhoneNumTextField"&gt;
        &lt;/div&gt;
  
        &lt;br&gt;
  
        &lt;div class="block"&gt;
          &lt;label for="NameOnCardTextField"&gt;Name On Card:&lt;/label&gt;
          &lt;input type="text" id="NameOnCardTextField" name="NameOnCardTextField"&gt;
        &lt;/div&gt;
  
        &lt;br&gt;
  
        &lt;div class="block"&gt;
          &lt;label for="NumOnCardTextField"&gt;Number On Card:&lt;/label&gt;
          &lt;input type="text" id="NumOnCardTextField" name="NumOnCardTextField"&gt;
        &lt;/div&gt;
  
        &lt;br&gt;
  
        &lt;div class="block"&gt;
          &lt;label for="ExpirationTextField"&gt;Expiration Date:&lt;/label&gt;
          &lt;input type="text" id="ExpirationTextField" name="ExpirationTextField"&gt;
        &lt;/div&gt;
  
        &lt;br&gt;
  
        &lt;div class="block"&gt;
          &lt;label for="CVVTextField"&gt;CVV:&lt;/label&gt;
          &lt;input type="text" id="CVVTextField" name="CVVTextField"&gt;
        &lt;/div&gt;
  
        &lt;br&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
    &lt;!-- Tasks tab --&gt;
    &lt;div id="TaskTab" class="tabcontent"&gt;
      &lt;h1&gt;hi&lt;/h1&gt;
    &lt;/div&gt;
  
    &lt;!-- Dashboard tab --&gt;
    &lt;div id="DashboardTab" class="tabcontent"&gt;
  
    &lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/LIE9E.png" rel="nofollow noreferrer">Can't click on dashboard or New Task tab after being on New Profile tab</a></p>