Estoy buscando agregar varios botones 'ver más' en mi página. En el momento en que cuando agrego uno nuevo solo funciona el primer botón y se rompe el segundo. Entonces, el primer botón funciona bien, pero cuando intenté copiar esta miniatura y hacer otra con la misma, vi más detalles. El segundo botón solo cambia las primeras miniaturas 'ver más'
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"; <div id="thumbnail-frame"> <div id="thumbnail" <div id="details"> <div id="moreDetails"> <h3> 001 </h3> <h3> Saturate Radio </h3> <h4> N00DS </h4> </div> <button title="Click to Show" type="button" onclick="toggle()">More Details</button> </div> </div> <div id="thumbnail-frame"> <div id="thumbnail" <div id="details"> <div id="moreDetails"> <h3> 002 </h3> <h3> Saturate Radio </h3> <h4> N00DS </h4> </div> <button title="Click to Show" type="button" onclick="toggle()">More Details</button> </div> </div>El problema principal es que no puede tener identificaciones duplicadas en una página. El uso de clases funciona bien, o el uso de la posición relativa de sus elementos html.
function toggle(button){ // this works because the button is immediately after the "moreDetails" element it pertains to let Text = button.previousElementSibling; // this would work if you move the button so it is not immediately after moreDetails, but still in the same parent div. //let Text = button.parentElement.querySelector(".moreDetails"); if(Text.style.display == "none"){ Text.style.display= "block"; } else { Text.style.display = "none"; } } const moreDetailses = document.querySelectorAll(".moreDetails"); for (let i = 0; i < moreDetailses.length; i++) { moreDetailses[i].style.display = "none"; } <div class="details"> <div class="moreDetails"> <h3> 001 </h3> <h3> Saturate Radio </h3> <h4> N00DS </h4> </div> <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button> </div> <div class="details"> <div class="moreDetails"> <h3> 002 </h3> <h3> Saturate Radio </h3> <h4> N00DS </h4> </div> <button title="Click to Show" type="button" onclick="toggle(this)">More Details</button> </div>Solo se permite usar una identificación una vez por página, por lo que su script de alternancia no funcionará como se espera cuando tenga varios elementos con la misma identificación.
Para que sea funcional y mantener los cambios necesarios al mínimo, debe hacer lo siguiente:
onclick="toggle(this)"