Skip to main content
3 de 3
se eliminó 1 carácter en el cuerpo
Alvaro Montoro
  • 49.8k
  • 28
  • 109
  • 190

¿Cómo realizar el efecto de leer mas?

Tengo un texto el cual no quiero que se muestre completamente, solo una parte y que tenga la opción de "leer más" con un botón o lo que sea. Intento lo siguiente, pero por alguna razón no me funciona:

$(document).ready(function() {
  $(".more").toggle(function() {
    $(this).text("Leer menos...").siblings(".complete").show();
  }, function() {
    $(this).text("Leer mas...").siblings(".complete").hide();
  });
});
.more {
  cursor: pointer;
  background-color: #ccf;
}

.complete {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="text-comment">
  <p class="text-par">"Vision"</p>
  <p class="text-name">
    <span class="summary">
      <p>Lorem ipsum dolor sit amet, vis alterum feugiat sanctus ea. Affert facete eu cum, ut dicta vitae quo. Cum
id aeque option epicuri, nec oblique suscipit ad. Et sea odio adhuc altera. Verterem nominati an mel, his
diam consetetur ei. Eligendi principes sed no, ubique patrioque vix cu, soluta veritus percipit vim ex.</p>
    </span>
    <span class="complete">
      <p>Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.</p>
      <p>Posse constituam pro eu. Sit graecis appetere at, id his quas possit platonem, ius at nobis decore ullamcorper.
Vix ne latine iudicabit constituto, justo fastidii eleifend et pro, ei sit solet dicant mediocrem. Te sit
cibo percipit persecuti. Debet convenire suavitate ei vis. Pri utinam labitur temporibus ex.</p>
    </span>
    <span class="more">Leer mas...</span>
  </p>
</div>

Si se puede hacer solo con JavaScript sería mucho mejor, pero todos los ejemplos que encontré son con jQuery.

Richard
  • 1.5k
  • 3
  • 19
  • 52