Jump to content

tomriddle22

Members
  • Posts

    1
  • Joined

  • Last visited

Posts posted by tomriddle22

  1. 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. 

     

    {{ 'tabs.js' | asset_url | script_tag }}
    {{ 'tabs.css' | asset_url | stylesheet_tag }}
    
    {% include 'breadcrumb' %}
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <div class="grid">
    
      <div class="grid-item large--two-thirds push--large--one-sixth">
    
        <h1>{{ page.title }}</h1>
    
        <div class="rte">
          
     
    
          <h2>Tabs</h2>
    <p>Click on the x button in the top right corner to close the current tab:</p>
    
    <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>
    
    <div id="London" class="tabcontent">
      <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
      <h3>London</h3>
      <p>London is the capital city of England.</p>
    </div>
    
    <div id="Paris" class="tabcontent">
      <span onclick="this.parentElement.style.display='none'" class="topright">&times</span>
      <h3>Paris</h3>
      <p>Paris is the capital of France.</p> 
    </div>
    
    <div id="Tokyo" class="tabcontent">
      <span onclick="this.parentElement.style.display='none'" class="topright">&times</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: 6px 12px;
      border: 1px solid #ccc;
      border-top: none;
    }
    
    /* Style the close button */
    .topright {
      float: right;
      cursor: pointer;
      font-size: 28px;
    }
    
    .topright:hover {color: red;}

     

×
×
  • Create New...