Jump to content

All vertical tab content showing by default.


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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...