Creé dos (2) secciones. Quiero ocultar una sección de forma predeterminada, con un botón debajo que dice "Mostrar más".
Algo como esto --- ( https://www.livermoretreeremoval.com/tree-service-ulmar ) en la sección " Ulmar Tree Services Top Sights ".
Si se hace clic en el botón, debería aparecer la sección oculta y el texto del botón debería cambiar a "Mostrar menos".
Si se vuelve a hacer clic en el botón, la sección visible debería volver a ocultarse y el texto del botón debería decir "Mostrar más".
Entonces, cuando está oculto, el botón dice "Mostrar más", y cuando está visible, el botón dice "Mostrar menos".
`
function toggleBlock() { // get the block var myBlock = document.getElementById('service-area-two'); // get the current value of the block's display property var displaySetting = myBlock.style.display; // also get the block button, so we can change what it says var blockButton = document.getElementById('Show More'); // now toggle the block and the button text, depending on current state if (displaySetting == 'block') { // block is visible. hide it myBlock.style.display = 'none'; // change button text blockButton.innerHTML = 'Show Less'; } else { // block is hidden. show it myBlock.style.display = 'block'; // change button text blockButton.innerHTML = 'Show More'; } }`
El ID de la sección: service-area-two El nombre del botón es: ToggleButton
Sé que estoy haciendo muchas cosas mal.
¿Cómo puedo hacer que este botón funcione?
Usa el atributo oculto.
Asi que:
<div hidden id="service-area-two"> // content </div> <button id="Show More" onclick="toggleBlock()">Show more</button>Y la lógica de JavaScript así:
function toggleBlock() { var myBlock = document.getElementById("service-area-two"); var blockButton = document.getElementById("Show More"); if (myBlock.hidden) { blockButton.innerHTML = "Show Less"; myBlock.hidden = false; } else { blockButton.innerHTML = "Show More"; myBlock.hidden = true; } }Entonces, en cuanto al botón, mostrar más y mostrar menos no funciona, es lo que entendí. Creo que el error aquí es innerHTML . innerHTML significa el HTML real dentro del bloque como por ejemplo:
button.innerHTML = '<img src="---'">'
Finalmente, cambia innerHTML a innerText .