All vertical tab content showing by default.

[BlueLola]

I'm quite new to web development and I have been using https://www.w3schools.com/howto/howto_js_vertical_tabs.asp to create some vertical tabs on my own project. When I launch the page however, the content from both tabs I have added so far shows by default. When I select a tab, it does correct itself, but if I refresh or reopen the page, I am seeing this defect again. What am I doing wrong? Has anyone else experienced this? 

This is my code, I am using pure css so have just added some grids - I wonder if this is causing it somehow? 

<script>    
function goBack() {
    window.history.back();
}

function openWalkthrough(evt, WT) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent.style.display = "none";
  }

  // Get all elements with class="tablinks" and remove the class "active"
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks.className = tablinks.className.replace("active", "");
  }

  // Show the current tab, and add an "active" class to the link that opened the tab
  document.getElementById(WT).style.display = "block";
  evt.currentTarget.className += "active";
  }

</script>

 

<div class="pure-u-1  pure-u-md-22-24" style="background-color: #cccccc; height: 100vh;">
    
    <div class="tab">
    <button class="tablinks" onclick="openWalkthrough(event, 'A')">
   
    <div class="pure-g">
    <div class="pure-u-2-3">
    <p class="walkthroughTitle">Walk through 1</p>
    <p class="walkthroughAuthor">Written by Lorem</p>
    <p class="walkthroughDescription">
    Walk through description
    </p>
    </div>
           
    <div class="pure-g">
    <div class="pure-u-1-3">
    <img class="walkthroughMediaIcon" src="../img/running-man-256.png">
    </div>
    </div>
        
    </div>
    </button>
        
    <button class="tablinks" onclick="openWalkthrough(event, 'B')">
   
    <div class="pure-g">
    <div class="pure-u-2-3">
    <p class="walkthroughTitle">Walk through 2</p>
    <p class="walkthroughAuthor">Written by Ipsum</p>
    <p class="walkthroughDescription">
    This is a test description
    </p>
    </div>
           
    <div class="pure-g">
    <div class="pure-u-1-3">
    <img class="walkthroughMediaIcon"  src="../img/running-man-256.png">
    </div>
    </div>
        
    </div>
    </button>
    </div>
        
  <div id="A" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
  </div>
      
  <div id="B" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
  </div>
      
  </div>

 

I haven't changed any css. Thanks in advance for your help!

[Funce]

Hi there,

Welcome to the forums! You're code's run into a little problem, with the forum's in built formatter.

Please make sure to use codeblocks for your code lest this continue to happen.

 

Now in regards to your problem, it lies in your tablinks. None of your items that you've created are getting selected to start off with. Here's the example code:

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

Are you able to work it out from here?