Este es mi código html:
<div class="page-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor risus, tempus eu eros sodales, convallis consequat urna.</p> <p> Fusce ut neque sit amet turpis commodo facilisis. Etiam nunc nisi, porta nec ligula nec, cursus sodales orci. </p> <p> Cras lacinia odio ut elit pretium blandit. Suspendisse potenti. Ut leo est, pulvinar at urna sed, bibendum vestibulum ligula. </p> <p>Mauris efficitur velit in tortor pharetra, ut posuere sapien vulputate. Pellentesque venenatis quam vel suscipit consequat. </p> <p>Mauris efficitur velit in tortor pharetra, ut posuere sapien vulputate. Pellentesque venenatis quam vel suscipit consequat. </p> </div> Quiero agregar leer más/leer menos enlaces después de la etiqueta del tercer párrafo dentro de div . No puedo usar ninguna clase para la etiqueta <p> en html , ya que todo el contenido dentro de div se obtiene de la base de database con etiquetas. ¿Alguien puede decirme la solución usando css o javascript ?
Este código debería funcionar. Primero divide el texto en función de " </p> " para obtener los párrafos y luego imprime solo los 3 primeros. Y luego agrega el enlace Leer más.
var paraHolder = document.getElementsByClassName("page-content")[0]; var readMore = paraHolder.innerHTML; var para = readMore.split("</p>"); var maxParas = 4; if (maxParas < para.length - 1) { paraHolder.innerHTML = ""; for (i = 0; i <= maxParas - 1; i++) { paraHolder.innerHTML += para[i] + "</p>"; } readLess = paraHolder.innerHTML; paraHolder.innerHTML += '<a href="#" onclick="readMoreFunction()">Read More...</a>'; } function readMoreFunction() { paraHolder.innerHTML = readMore + '<a href="#" onclick="return readLessFunction()">Read Less...</a>'; } function readLessFunction() { paraHolder.innerHTML = readLess + '<a href="#" onclick="return readMoreFunction()">Read More...</a>' } <div class="page-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor risus, tempus eu eros sodales, convallis consequat urna.</p> <p> Fusce ut neque sit amet turpis commodo facilisis. Etiam nunc nisi, porta nec ligula nec, cursus sodales orci. </p> <p> Cras lacinia odio ut elit pretium blandit. Suspendisse potenti. Ut leo est, pulvinar at urna sed, bibendum vestibulum ligula. </p> <p>Mauris efficitur velit in tortor pharetra, ut posuere sapien vulputate. Pellentesque venenatis quam vel suscipit consequat. </p> <p>Mauris efficitur velit in tortor pharetra, ut posuere sapien vulputate. Pellentesque venenatis quam vel suscipit consequat. </p> </div>Una alternativa que usa principalmente CSS (reduciendo así FOUC), con algo de jquery para agregar un par de botones (podría estar en el html) y para agregar/eliminar una clase en el contenedor .page-content .
$("<button class='more'>read more...</button>") .appendTo(".page-content") .click(function() { $(this).closest(".page-content").removeClass("collapsed"); }); $("<button class='less'>read less...</button>") .appendTo(".page-content") .click(function() { $(this).closest(".page-content").addClass("collapsed"); }); .page-content.collapsed > :nth-of-type(n+4) { display:none; } .page-content > .more { display:none; } .page-content > .less { display:block; } .page-content.collapsed > .more { display:block; } .page-content.collapsed > .less { display:none; } /* style as "link" */ .page-content > button { background: none!important; border: none; padding: 0!important; color: #069; text-decoration: underline; cursor: pointer; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="page-content collapsed"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor risus, tempus eu eros sodales, convallis consequat urna.</p> <p> Fusce ut neque sit amet turpis commodo facilisis. Etiam nunc nisi, porta nec ligula nec, cursus sodales orci. </p> <p> Cras lacinia odio ut elit pretium blandit. Suspendisse potenti. Ut leo est, pulvinar at urna sed, bibendum vestibulum ligula. </p> <p>Mauris efficitur velit in tortor pharetra, ut posuere sapien vulputate. Pellentesque venenatis quam vel suscipit consequat. </p> <p>Mauris efficitur velit in tortor pharetra, ut posuere sapien vulputate. Pellentesque venenatis quam vel suscipit consequat. </p> </div>Puede crear una sección colapsable con HTML puro...
<details> <summary> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor risus, tempus eu eros sodales, convallis consequat urna.</p> <p> Fusce ut neque sit amet turpis commodo facilisis. Etiam nunc nisi, porta nec ligula nec, cursus sodales orci. </p> <p> Cras lacinia odio ut elit pretium blandit. Suspendisse potenti. Ut leo est, pulvinar at urna sed, bibendum vestibulum ligula. </p> <label class="label" id="read-more">Read more</label> </summary> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor risus, tempus eu eros sodales, convallis consequat urna.</p> <p> Fusce ut neque sit amet turpis commodo facilisis. Etiam nunc nisi, porta nec ligula nec, cursus sodales orci. </p> <p> Cras lacinia odio ut elit pretium blandit. Suspendisse potenti. Ut leo est, pulvinar at urna sed, bibendum vestibulum ligula. </p> <label class="label" id="read-less">Read less</label> </details>Agregue un detector de eventos para el control de etiquetas...
details.addEventListener("toggle", event => { if (details.open) { /* the element was toggled open */ $("#read-more").hide(); } else { /* the element was toggled closed */ $("#read-more").show(); } });Añade un poco de estilo...
.label { text-align: right; font-size: 9px; display: block; }