Funciona, pero no comienza con mi contenido de 'más detalles' cambiado a oculto. Comienza mostrando el contenido. He reescrito esto 10 veces y no puedo resolverlo.
function toggle() { let Text = document.getElementById('moreDetails'); if (Text.style.display == "none") { Text.style.display = "block"; } else { Text.style.display = "none"; } } <div id="moreDetails"> <h3> 001 </h3> <h3> Saturate Radio </h3> <h4> N00DS </h4> </div> <button title="Click to Show" type="button" onclick="toggle()">MoreDetails</button>agregue estilo de visualización ninguno a su ID de div más detalles
<div id="moreDetails" style="display: none">o puedes usar así también
<script> function toggle(){ let Text = document.getElementById('moreDetails'); if(Text.style.display == "none"){ Text.style.display= "block"; } else { Text.style.display = "none"; } } document.getElementById("moreDetails").style.display = "none"; </script>o puedes usar el operador ternario
<script> function toggle(){ const Text = document.getElementById('moreDetails'); Text.style.display = Text.style.display == "none" ? "block" : "none"; } document.getElementById("moreDetails").style.display = "none"; </script>Para comenzar con más detalles ocultos, debe agregar style="display: none;" a su div; Aquí está el código:
function toggle() { let Text = document.getElementById('moreDetails'); if (Text.style.display == "none") { Text.style.display = "block"; } else { Text.style.display = "none"; } } <div id="moreDetails" style="display: none;"> <h3> 001 </h3> <h3> Saturate Radio </h3> <h4> N00DS </h4> </div> <button title="Click to Show" type="button" onclick="toggle()">MoreDetails</button>Agregar mostrar ninguno para div.
function toggle(){ const Text = document.getElementById('moreDetails'); Text.style.display = Text.style.display == "none" ? "block" : "none"; } <div id="moreDetails" style="display: none"> <h3> 001 </h3> <h3> Saturate Radio </h3> <h4> N00DS </h4> </div> <button title="Click to Show" type="button" onclick="toggle()">MoreDetails</button>