Estoy tratando de show/hide div en html ahora estoy usando w3schools Toggle Hide and Show link . Está funcionando bien, pero de forma predeterminada muestra la condición que, de forma predeterminada, oculta la condición si presiono el botón Mostrar, debería mostrarse. ayúdame.
código
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #myDIV { width: 100%; padding: 50px 0; text-align: center; background-color: lightblue; margin-top: 20px; } </style> </head> <body> <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p> <button onclick="myFunction()">Try it</button> <div id="myDIV"> This is my DIV element. </div> <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p> <script> function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script> </body> </html>Debe realizar los siguientes cambios en su código. Agregue una display:none para #myDIV en css para ocultarlo en la carga inicial. Pero si aún verifica en JS (x.style.display), obtendrá una cadena vacía en lugar de ninguna. Eso es porque el atributo de estilo no tiene ninguna configuración para mostrar hasta que el código se ejecuta por primera vez. Entonces, para manejar este caso, debe actualizar su condición if también de esta manera: if (x.style.display == "none" || x.style.display === "")
Puede consultar aquí para obtener más información - Enlace de pregunta similar
He adjuntado un fragmento. Espero que así es como quieres que funcione.
function myFunction() { var x = document.getElementById("myDIV"); if (x.style.display == "none" || x.style.display === "") { x.style.display = "block"; } else { x.style.display = "none"; } } #myDIV { width: 100%; display: none; padding: 50px 0; text-align: center; background-color: lightblue; margin-top: 20px; } <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p> <button onclick="myFunction()">Try it</button> <div id="myDIV"> This is my DIV element. </div> <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>Agregar pantalla: ninguno al div css,
#myDIV { width: 100%; padding: 50px 0; text-align: center; background-color: lightblue; margin-top: 20px; display: none; }y cambie la condición if a esto:
if (x.style.display == "none" || x.style.display === "")Sugiero no actualizar la propiedad de estilo directamente, sino alternar una clase "oculta" en su lugar. Aquí hay un fragmento:
function myFunction() { const x = document.getElementById("myDIV"); x.classList.toggle("hidden"); } #myDIV { width: 100%; padding: 50px 0; text-align: center; background-color: lightblue; margin-top: 20px; } .hidden { display: none; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p> <button onclick="myFunction()">Try it</button> <div id="myDIV" class="hidden"> This is my DIV element. </div> </body> </html>Si esto no resuelve su problema, hágamelo saber;)