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!
