Creé una función para ocultar una sección en mi página hasta que el usuario haga clic en un botón para mostrarla. Ahora el botón está funcionando bien. Pero al cargar la página, la sección no está oculta y el botón dice "Mostrar más" en lugar de "Mostrar menos".

Consulte esta página para ver el botón y el comportamiento de la sección en la carga de la página: https://treeremoval.ga/tree-service-ulmar/#ShowMore

Notará que las 2 secciones que contienen 6 imágenes cada una están cargadas, y el botón sigue diciendo "Mostrar más".

Este no es el comportamiento esperado: el comportamiento esperado debería ser que la sección inferior con 6 imágenes permanezca oculta en la carga de la página, y el botón debería decir "Mostrar más", que después de hacer clic debería revelar la sección oculta y el botón luego dice "Mostrar menos".

Sin embargo, cuando se hace clic en el botón después de cargar la página, comienza a funcionar bien: oculta y muestra la sección, y el texto del botón cambia en consecuencia a "Mostrar más" y "Mostrar menos".

El problema es solo en la carga de la página. ¿Cómo me aseguro de que en la carga de la página, la sección permanezca oculta? ¿Y el botón dice "Mostrar más" para abrir la sección oculta?

Aquí está mi HTML:

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

Y aquí está el 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; } }

Saludos