Jump to content

Vertical tabs not working as expected


Recommended Posts

.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;
/* 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 id="Fitness" class="tabcontenta">

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

        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

 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. 

Display after user clicks on button.png

display on Opening webpage.png

Edited by ajoy123rocks
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Create New...