Tengo el siguiente script, que encontré en w3schools ,
<script> var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); } </script>para hacer un botón de alternar para un cuadro de texto. El problema es que el script inicialmente muestra el cuadro de texto y luego lo oculta . Primero quiero ocultar y luego mostrar . De lo contrario, el primer clic inicial no hace nada, por lo que los usuarios pensarán que el botón está roto .
Para explicar más, lo uso con
<button type="button" class="collapsible">Toggle document map</button> <div class="content"> <p>bla..bla</p> </div> y siguiendo css .
.active, .collapsible:hover { background-color: #8511ae; color: white; font-weight: bold; text-decoration: underline; } .collapsible { background-color: #faf9d8; color: #4e3fe3; font-style: italic; font-weight: bold; font-family: verdana, sans-serif; cursor: pointer; padding: 5px; width: 35%; float: left border: 0px solid #8511ae; text-align: center; outline: none; font-size: 15px; margin-top: 2%; margin-bottom: 0%; margin-left: 2%; margin-right: 24%; } .content { width: 35%; float: left; padding: 0px; border: 0px solid #8511ae; margin-top: 0%; margin-bottom: 0%; margin-left: 2%; margin-right: 3%; background-color: #faf9d8; } El content css inicial de w3schools, también incluye
display: none; overflow: hidden; pero como quiero que el cuadro de texto esté visible inicialmente al visitar la página , dejé los 2 elementos anteriores, fuera del css de content .
Pero ahora, como se mencionó anteriormente, tengo que hacer clic en el botón de alternar dos veces (solo la primera vez que hago esto) para ocultar el cuadro de texto.
¿Cómo puedo modificar el javascript anterior para que el primer clic se oculte en lugar de intentar hacerlo visible?
Intenté algunos cambios por mi cuenta, pero rompí el guión. Este es el primer sitio web que hice, y cualquier ayuda será muy apreciada.
La propiedad de solo lectura de estilo devuelve el estilo en línea de un elemento en forma de CSSStyleDeclaration
De la documentación HTMLElement.style
Lo que significa que cuando usa content.style.display (ya sea para leer o establecer su valor), lo que está actuando es el estilo que está escrito en línea .
Dado que <div class="content"> no tiene el estilo en línea cuando la página se carga por primera vez, su prueba if (content.style.display === "block") se evalúa como false . Funciona la segunda vez porque su primer clic aplicó el estilo de bloque en línea con content.style.display = "block" .
Una forma de solucionarlo es simplemente agregar manualmente el estilo en línea a su elemento de content de la siguiente manera:
<div class="content" style="display:block;">...
para que su código pueda evaluarse como true la primera vez que haga clic en el botón.
Sin embargo, como han dicho otros, si no desea usar estilos en línea, puede usar classList en su lugar.
Solo usa:
if (content.style.display === "none") { content.style.display = "block"; } else { content.style.display = "none"; }en vez de:
if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.display === "none") { content.style.display = "block"; } else { content.style.display = "none"; } }); } .active, .collapsible:hover { background-color: #8511ae; color: white; font-weight: bold; text-decoration: underline; } .collapsible { background-color: #faf9d8; color: #4e3fe3; font-style: italic; font-weight: bold; font-family: verdana, sans-serif; cursor: pointer; padding: 5px; width: 35%; float: left border: 0px solid #8511ae; text-align: center; outline: none; font-size: 15px; margin-top: 2%; margin-bottom: 0%; margin-left: 2%; margin-right: 24%; } .content { width: 35%; float: left; padding: 0px; border: 0px solid #8511ae; margin-top: 0%; margin-bottom: 0%; margin-left: 2%; margin-right: 3%; background-color: #faf9d8; } <button type="button" class="collapsible">Toggle document map</button> <div class="content"> <p>bla..bla</p> </div>