I created a function to hide a section on my Page until the user clicks a button to unhide it. Now the button is working well. But on Page load, the section is not hidden, and the button says "Show More" instead of "Show Less".

See this page to see the button and the section behavior on Page load-- https://treeremoval.ga/tree-service-ulmar/#ShowMore

You will notice that all the 2 sections holding 6 images each are loaded, and the button is still saying "Show More",

This is not the expected behavior: the expected behavior should be that the lower section with 6 images stays hidden on Page load, and the button should say "Show More"-- which after clicking it should then reveal the hidden section, and the button then says "Show Less".

Although, when the button is clicked after page load, it starts functioning well--of hiding and unhiding the section, with the button Text changing accordingly to "Show More" and "Show Less".

The problem is only at page load. How do I ensure that at Page load, the section stays hidden? And the button says "Show More" in order to open the hidden section?

Here's my HTML:

<button id="ShowMore" onclick="toggleBlock()">Show More</button>

And here's the JS:

    function toggleBlock() {
  var myBlock = document.getElementById("service-area2");

  var blockButton = document.getElementById("ShowMore");

  if (myBlock.hidden) {
    blockButton.innerHTML = "Show Less";
    myBlock.hidden = false;
  } else {
    blockButton.innerHTML = "Show More";
    myBlock.hidden = true;
  }
}

Regards