Actualmente estoy usando este código para un botón MÁS para ocultar/revelar, pero no sé cómo hacer que dependa de la consulta @media para que solo se muestre y funcione en un ancho de navegador particular.
CSS:
<div> <p> Can I put a paragraph of text here? <div id="dots1">...</div> </p> <div style="display: none;" id="more1"> <p> The text I want to be on read more </p> </div> <button class="btn" id="myBtn1"> Read more </button> </div>JAVASCRIPT
<script> for (const btn of document.querySelectorAll('.btn')) { btn.addEventListener('click', () => { const [ dots, moreText ] = Array.from(btn.parentElement.querySelectorAll('div')); if (dots.style.display === "none") { dots.style.display = "inline"; btn.innerHTML = "MORE"; moreText.style.display = "none"; } else { dots.style.display = "none"; btn.innerHTML = "LESS"; moreText.style.display = "block"; } }); } </script>Y eso es esencialmente porque depende de este "estilo de extensión" que debe colocarse en línea en el archivo HTML. No funcionará si convierto ese estilo de intervalo en un atributo de clase.
<div style="display: none;" id="more1">O:
Por separado, también me gustaría deshacerme de los "puntos" que forman parte del guión. Actualmente lo dejo con los puntos vacíos, pero no es una codificación perfecta.
EDITADO: quiero decir que quiero que el texto se muestre en un cierto ancho sin el botón más, luego se oculte con un botón en otro ancho del navegador. Y también diga "LEER MÁS" primero y "LEER MENOS" o algo diferente después de que se abra. ¡Muchos gracias!
¡Gracias!
Usando CSS, escondo el botón Leer más y muestro el texto Leer más por defecto. Luego, usando una consulta de medios, determino según el tamaño para ocultar el texto y mostrar el botón. Luego, usando javascript, adjunto un controlador de eventos al documento y capturo todos los clics de btn-readmore y alterno una clase activa que mostrará bloqueo o no.
document.addEventListener("click",function(e){ let el = e.target; if(el.className == "btn-readmore"){ let moreTxt = el.parentNode.querySelector(".more-text"); moreTxt.classList.toggle("active"); el.innerHTML = (moreTxt.className.indexOf("active") > 0) ? "Read Less" : "Read More"; } }); .active.more-text,.more-text{display:block;} .btn-readmore{display:none} @media screen and (min-width: 200px) and (max-width: 1000px){ .btn-readmore{display:block} .more-text{display:none;} } <div> <p> Can I put a paragraph of text here? </p> <div class="more-text"> <p> The text I want to be on read more </p> </div> <button class="btn-readmore"> Read more </button> </div>