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!