Jump to content

All vertical tab content showing by default.


BlueLola
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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.

XcQfW3F.png

 

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?

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
 Share

×
×
  • Create New...