Fellucca

Do you mean the "defaultOpen" line has to be in the HTML?

I installed the tab from here https://www.w3schools.com/howto/howto_js_tabs.asp and it works great.

However, when I added and adjusted the code for "show a tab by default" it is not working.

Here is my HTML:

<!-- Tab links -->
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'Cultivate')" id="defaultOpen">Cultivate</button>
  <button class="tablinks" onclick="openCity(event, 'Weed')">Weed</button>
  <button class="tablinks" onclick="openCity(event, 'Mulch')">Mulch</button>
  <button class="tablinks" onclick="openCity(event, 'Seed')">Seed</button>
</div>

<!-- Tab content -->
<div id="Cultivate" class="tabcontent">
  <p>When easily rolled back and forth over the ground, the Spintiller digs then lifts the soil just an inch or two creating the optimal condition for water, air, and nutrient penetration.</p>
</div>

<div id="Weed" class="tabcontent">
  <p>With a simple flip, the Spintiller’s narrow path is great for loosening and pulling weeds,lessening the need for harmful weedicides. Use this in and around your precious plants and vegetables reducing root, leaf and stalk damage.</p>
</div>

<div id="Mulch" class="tabcontent">
  <p>The Spintiller is also perfect for dressing your mulch beds. It does quick and easy work of turning over mulch without tossing it all over the place – invigorating your beds and keeping your mulch healthy looking.</p>
</div>

<div id="Seed" class="tabcontent">
  <p>Tokyo is the capital of Japan.</p>
</div>

And here is my JS:

function openCity(evt, cityName) {
  // 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 button that opened the tab
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

Any help would be appreciated.

I implemented this Tab menu and it works great

https://www.w3schools.com/howto/howto_js_tabs.asp

However, when I try to add the code as instructed to make the first tab open when the page loads I cannot get it to work.

My html is this:

<!-- Tab links -->
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'Cultivate')" id="defaultOpen">Cultivate</button>
  <button class="tablinks" onclick="openCity(event, 'Weed')">Weed</button>
  <button class="tablinks" onclick="openCity(event, 'Mulch')">Mulch</button>
  <button class="tablinks" onclick="openCity(event, 'Seed')">Seed</button>
</div>

<!-- Tab content -->
<div id="Cultivate" class="tabcontent">
  <p>When easily rolled back and forth over the ground, the Spintiller digs then lifts the soil just an inch or two creating the optimal condition for water, air, and nutrient penetration.</p>
</div>

<div id="Weed" class="tabcontent">
  <p>With a simple flip, the Spintiller’s narrow path is great for loosening and pulling weeds,lessening the need for harmful weedicides. Use this in and around your precious plants and vegetables reducing root, leaf and stalk damage.</p>
</div>

<div id="Mulch" class="tabcontent">
  <p>The Spintiller is also perfect for dressing your mulch beds. It does quick and easy work of turning over mulch without tossing it all over the place – invigorating your beds and keeping your mulch healthy looking.</p>
</div>

<div id="Seed" class="tabcontent">
  <p>Tokyo is the capital of Japan.</p>
</div>

And my JS is this:

function openCity(evt, cityName) {
  // 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 button that opened the tab
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

Any help would be appreciated.