Vertical tabs not working as expected

[ajoy123rocks]

.tab {
  float: left;
  border: 1px solid yellow;  
  background-color: yellow;
  width: 15%;
  height: 100px;

 
}
  
/* Style the buttons inside the tab */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 20px 10px;
  width: 100%;
  border: none;
  outline: none;
  text-align: justify;
  cursor: pointer;
  transition: 0.3s;
  font-size:18px;
  
  
}
  
/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}
  
/* Create an active/current "tab button" class */
.tab button.active {
  background-color: black;
  color: yellow;
}
  
/* Style the tab content */
.tabcontenta {
  float: left;
  padding: 0px 12px;
  border: none;
  width: 80%;
  border-left: none;
  height: 700px;
  color: yellow;
 
}


<div class="tab">
        <button class="tablinks" onclick="openCity(event, 'Fitness')" id="defaultOpen"><b>FITNESS TESTS</b></button>
        <button class="tablinks" onclick="openCity(event, 'Mechanics')"><b>MECHANICS</b></button>
        <button class="tablinks" onclick="openCity(event, 'Curriculum')"><b>CURRICULUM</b></button>
      </div>

      <div id="Fitness" class="tabcontenta">
      </div>

      <div id="Mechanics" class="tabcontenta">
      </div>
      <div id="Curriculum" class="tabcontenta">
      </div>

      <script>
        function openCity(evt, cityName) {
          var i, tabcontent, tablinks;
          tabcontent = document.getElementsByClassName("tabcontenta");
          for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
          }
          tablinks = document.getElementsByClassName("tablinks");
          for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
          }
          document.getElementById(cityName).style.display = "block";
          evt.currentTarget.className += " active";
        }
        
        // Get the element with id="defaultOpen" and click on it
        document.getElementById("defaultOpen").click();
        </script>

 The below code for vertical tab is not working as intended.

On opening the webpage, the FITNESS TESTS tab is not highlighted as the default tab and all the contents of other tabs too are also displayed below this.

After clicking any tab now, the functionality is fine.

The problem is when the webpage is opened for the first time. 

Edited November 26, 2021 by ajoy123rocks

[dsonesuk]

The active class defines the tab that should be highlighted, so add 'active' to the tab you require to be highlighted on loading of page. After that, JavaScript code will go through process of removing 'active' class and applying to the tab selected. you don't require 'defaultOpen' id or coding for that.

[ajoy123rocks]

ONE ISSUE RESOLVED: I added the active class to FITNESS tab and it gets highlighted at page loading.

SECOND ISSUE: On loading the page the contents of other tab are also displayed one below the other as show second pic in the original post. But once I start clicking other tabs only the contents of that tab are loaded. The issue is only when the page is loaded.

Kindly please help.

[dsonesuk]

Because you have removed display: none from tabcontenta, its just following your instructions.

Replace display: none, and as with setting the active class to highlight, add attribute  style="display: block;" to the tabcontenta you wish to have shown on loading of page.