Tengo este código y me pregunto si puedo mostrar el resto del texto al hacer clic en el área div en lugar de solo el botón y si es posible conectarlos.
function ReadMore(event) { var dots = event.target.previousElementSibling.querySelector(".dots"); var moreText = event.target.previousElementSibling.querySelector(".more"); var btnText = event.target; if (dots.style.display === "none") { dots.style.display = "inline"; btnText.innerHTML = "Read more"; moreText.style.display = "none"; } else { dots.style.display = "none"; btnText.innerHTML = "Read less"; moreText.style.display = "inline"; } } .more { display: none; } <div class="glide__slide"> <h3>Inka B.</h3> <p>Nádherné místo u lesa, ubytování v krásných, čistých zrenovovaných prostorách. Společná kuchyň velká se 3 linkami, 2 sporáky, 2 mikrovlnkami... když je více lidí, stále se dá vařit. A vedlejší jídelna pojme přes 20 lidí <span class="dots">...</span> <span class="more">- ideální i na rodinnou oslavu. Postele pohodlné, pokoje útulné...a ten výhled z terasy! Na všem se dalo domluvit...zkrátka, vracíme se zpět! Cítili jsme se tu opravdu vítání. Děkujeme!</span> </p> <button onclick="ReadMore(event)" class="myBtn">Read more</button> </div>Una forma de lograr esto es tener solo el detector de eventos en el padre. Y para cambiar sus selectores de consulta para que use event.currentTarget en lugar de event.target , para que se comporte de manera idéntica sin importar de dónde provenga el evento en el div .
function ReadMore(event) { var dots = event.currentTarget.querySelector(".dots"); var moreText = event.currentTarget.querySelector(".more"); var btnText = event.currentTarget.querySelector("button"); if (dots.style.display === "none") { dots.style.display = "inline"; btnText.innerHTML = "Read more"; moreText.style.display = "none"; } else { dots.style.display = "none"; btnText.innerHTML = "Read less"; moreText.style.display = "inline"; } } .more { display: none; } <div class="glide__slide" onclick="ReadMore(event)"> <h3>Inka B.</h3> <p>Nádherné místo u lesa, ubytování v krásných, čistých zrenovovaných prostorách. Společná kuchyň velká se 3 linkami, 2 sporáky, 2 mikrovlnkami... když je více lidí, stále se dá vařit. A vedlejší jídelna pojme přes 20 lidí <span class="dots">...</span> <span class="more">- ideální i na rodinnou oslavu. Postele pohodlné, pokoje útulné...a ten výhled z terasy! Na všem se dalo domluvit...zkrátka, vracíme se zpět! Cítili jsme se tu opravdu vítání. Děkujeme!</span> </p> <button class="myBtn">Read more</button> </div>El truco aquí fue usar event.stopPropagation() cuando el botón activaba el evento. Esto se debe a que el evento aparecerá en el elemento principal cuando se haga clic en el botón (porque ambos elementos tienen los controladores registrados para ese evento) y, de lo contrario, activaría el controlador dos veces.
Seré más claro. Tiene tanto el contenedor div como el botón escuchando el evento de clic. Si el clic se produce en el botón, primero hará que el controlador escuche que se active el botón. Después de eso, dado que el botón está anidado dentro del div y ese div tiene un controlador que escucha el evento de clic, también se activará (porque se dice que el evento burbujea https://developer.mozilla.org/en- US/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture ). Para evitar que el controlador sea llamado dos veces para el mismo evento, verifico si el elemento que activa el evento es el botón y, en ese caso, detendrá la propagación (el burbujeo hacia el padre).
function ReadMore(event) { //this is a brutal way to get the html elements based on which element fired the event if(event.target.classList.contains('myBtn')){ btn = event.currentTarget; dots = btn.parentElement.querySelector('.dots'); more = btn.parentElement.querySelector('.more'); }else{ btn = event.currentTarget.querySelector('.myBtn'); dots = event.currentTarget.querySelector('.dots'); more = event.currentTarget.querySelector('.more'); } if (dots.style.display === "none") { dots.style.display = "inline"; btn.innerHTML = "Read more"; more.style.display = "none"; } else { dots.style.display = "none"; btn.innerHTML = "Read less"; more.style.display = "inline"; } if(event.target.classList.contains('myBtn')) window.event.stopPropagation(); } button.myBtn{ cursor: pointer; } <div class="glide__slide" onclick="ReadMore(event)"> <h3>Inka B.</h3> <p>Nádherné místo u lesa, ubytování v krásných, čistých zrenovovaných prostorách. Společná kuchyň velká se 3 linkami, 2 sporáky, 2 mikrovlnkami... když je více lidí, stále se dá vařit. A vedlejší jídelna pojme přes 20 lidí <span class="dots">...</span> <span class="more" style="display:none;">- ideální i na rodinnou oslavu. Postele pohodlné, pokoje útulné...a ten výhled z terasy! Na všem se dalo domluvit...zkrátka, vracíme se zpět! Cítili jsme se tu opravdu vítání. Děkujeme! </span> </p> <button onclick="ReadMore(event)" class="myBtn">Read more</button> </div>actualice use currentTarget y asigne el evento de clic en todo el div. https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
Mi primera respuesta recomendé usar parentNode para buscar el div. https://developer.mozilla.org/en/docs/Web/API/Node/parentNode . Pero esto generará un error si hace clic en el tramo oculto. Gracias a @yousoumar. Señaló ;-)
function ReadMore(event) { const div = event.currentTarget; var dots = div.querySelector(".dots"); var moreText = div.querySelector(".more"); var btnText = div.querySelector("button"); if (dots.style.display === "none") { dots.style.display = "inline"; btnText.innerHTML = "Read more"; moreText.style.display = "none"; } else { dots.style.display = "none"; btnText.innerHTML = "Read less"; moreText.style.display = "inline"; } } .more { display: none; } <div class="glide__slide" onclick="ReadMore(event)"> <h3>Inka B.</h3> <p>Nádherné místo u lesa, ubytování v krásných, čistých zrenovovaných prostorách. Společná kuchyň velká se 3 linkami, 2 sporáky, 2 mikrovlnkami... když je více lidí, stále se dá vařit. A vedlejší jídelna pojme přes 20 lidí <span class="dots">...</span> <span class="more">- ideální i na rodinnou oslavu. Postele pohodlné, pokoje útulné...a ten výhled z terasy! Na všem se dalo domluvit...zkrátka, vracíme se zpět! Cítili jsme se tu opravdu vítání. Děkujeme!</span></p> <button class="myBtn">Read more</button> </div>