I am using the How to Create Tabs tutorial (https://www.w3schools.com/howto/howto_js_tabs.asp), but I can't get the default tab to work. It seems to work in the Tryit Editor, but even pasting the code as is, it doesn't work.
I am using Shopify and have a .js, .css, and a .liquid (page template) document.
Other changes on the pages seem to take affect.
{{ 'tabs.js' | asset_url | script_tag }}
{{ 'tabs.css' | asset_url | stylesheet_tag }}
{% include 'breadcrumb' %}
<metaname="viewport"content="width=device-width, initial-scale=1"><divclass="grid"><divclass="grid-item large--two-thirds push--large--one-sixth"><h1>{{ page.title }}</h1><divclass="rte"><h2>Tabs</h2><p>Click on the x button in the top right corner to close the current tab:</p><divclass="tab"><buttonclass="tablinks"onclick="openCity(event,'London')"id="defaultOpen">London</button><buttonclass="tablinks"onclick="openCity(event,'Paris')">Paris</button><buttonclass="tablinks"onclick="openCity(event,'Tokyo')">Tokyo</button></div><divid="London"class="tabcontent"><spanonclick="this.parentElement.style.display='none'"class="topright">×</span><h3>London</h3><p>London is the capital city of England.</p></div><divid="Paris"class="tabcontent"><spanonclick="this.parentElement.style.display='none'"class="topright">×</span><h3>Paris</h3><p>Paris is the capital of France.</p></div><divid="Tokyo"class="tabcontent"><spanonclick="this.parentElement.style.display='none'"class="topright">×</span><h3>Tokyo</h3><p>Tokyo is the capital of Japan.</p></div>
{{ page.content }}
</div></div></div>
function openCity(evt, cityName){
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i =0; i < tabcontent.length; i++){
tabcontent[i].style.display ="none";}
tablinks = document.getElementsByClassName("tablinks");
for (i =0; i < tablinks.length; i++){
tablinks[i].className = tablinks[i].className.replace(" active","");}
document.getElementById(cityName).style.display ="block";
evt.currentTarget.className +=" active";}// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
/* Change background color of buttons on hover */.tab button:hover {background-color:#ddd;}/* Create an active/current tablink class */.tab button.active {background-color:#ccc;}/* Style the tab content */.tabcontent {display: none;padding:6px12px;border:1px solid #ccc;border-top: none;}/* Style the close button */.topright {float: right;cursor: pointer;font-size:28px;}.topright:hover {color: red;}
Create Tabs - Show a Tab by Default - Not Working
in JavaScript
Posted
Hello,
I am using the How to Create Tabs tutorial (https://www.w3schools.com/howto/howto_js_tabs.asp), but I can't get the default tab to work. It seems to work in the Tryit Editor, but even pasting the code as is, it doesn't work.
I am using Shopify and have a .js, .css, and a .liquid (page template) document.
Other changes on the pages seem to take affect.