10

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.

3
  • No relacionado con tu pregunta (creo): el código HTML que presentas no es válido, los span no deberían contener p dentro (y un p no puede ir dentro de otro p). Eso va a hacer que el HTML interpretado por el navegador no sea como te esperas (y por eso ponía el "creo" arriba, porque puede que esa mala interpretación cause el problema).
    – Alvaro Montoro
    el 21 jul. 2018 a las 3:54
  • @AlvaroMontoro Prove con otros ejemplos tampoco me funcionan.. y aun quitando de que esten dentro de p sigue sin funcionar como quiero.
    – Richard
    el 21 jul. 2018 a las 4:08
  • Algún día, la etiqueta details estará totalmente soportada y extendida y seguro se podrá hacer esto sin necesidad de usar JS.
    – Alvaro Montoro
    el 21 jul. 2018 a las 4:58

5 respuestas 5

7

El problema por el que no te funciona el código es por cómo estás usando toggle. Ese método esconde/muestra elementos pasándole dos parámetros: duración y función a ejecutar cuando se complete la animación. Tal y como lo estás intentando ejecutar, es equivalente al evento toggle que fue considerado obsoleto a partir de la versión 1.8 y eliminado a partir de la versión 1.9. Esto se debe a que seguramente te basaste en un tutorial o página que estaba anticuado.

Una solución sería escuchar el evento click y hacer un toggle de #complete (cambiando también el texto del botón). Algo como esto:

$(document).ready(function() {
  $(".more").on("click", function() {
    // cambiar la visibilidad de complete
    $(".complete").toggle();

    // cambiar el texto del boton dependiendo del texto actual
    if ($(this).text() == "Leer menos...") {
      $(this).text("Leer mas...");
    } else {
      $(this).text("Leer menos...");
    }
  });
});
.more {
  cursor: pointer;
  background-color: #ccf;
}

.complete {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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>

4

Con JavaScript ,según el contenido de su HTML , Una opción sería solo acceder a previousElementSibling para a partir de esta propiedad, podder agregar y remover una clase con toggle de la propiedad classList

Para esto antes cree una clase show que es la que se usa para toggle

let toggle = document.querySelector('.more');
toggle.addEventListener('click',function(){
  this.previousElementSibling.classList.toggle('show');
  this.innerText = this.innerText==="Leer mas..." ? "Leer menos..." : "Leer mas...";
});
.more {
    cursor: pointer;
    background-color: #ccf;
}

.complete {
    display: none;
}

.show{
  display: block;
}
<div class="text-comment">
  <p class="text-par">"Vision"</p>
  <p class="text-name">
    <div 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>
    </div>
    <div 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>
    </div>
    <span class="more">Leer mas...</span>
  </p>

4

Algo parecido a lo que buscas existe en HTML sin necesidad de usar JavaScript o jQuery. Las etiquetas <details> y <summary> son precisamente para hacer algo parecido a lo que quieres: un acordeón/pestaña que se muestre al pulsar y se oculte al volver a pulsar:

<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>
    <details>
      <summary>Leer mas...</summary>
      <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>
    </details>
  </p>
</div>

Esta solución presenta algunos problemas:

  1. No está soportada por todos los navegadores (y en concreto IE/Edge... aunque parecía que iba a entrar en Edge, al final no lo hizo y llevan "trabajando en ello" un año).

  2. Aún en los navegadores que la soportan, no está muy extendida (no se pueden configurar cómo se va a mostrar el texto, y las pocas configuraciones disponibles son usando prefijos de navegador).

Aún así, se puede usar CSS para estilizar un poco, y sabiendo que el atributo open se añade cuando el texto está abierto, puedes jugar con ::before/::after para hacer que cambie el texto (pero seguirás sin poder ponerlo detrás, al menos de momento).

details summary::after {
  content: "Leer mas..."
}

details[open] summary::after {
  content: "Leer menos..."
}
<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>
    <details>
      <summary></summary>
      <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>
    </details>
  </p>
</div>

3

Otra forma seria agregando clases para que se vea completo y acortarlo.

Para acortar el parrafo mediante css se puede usar white-space: nowrap;

var condicional = document.getElementById('more');

document.getElementById('more').addEventListener('click', verCompleto)

function verCompleto() {
  var texto = condicional.innerHTML;

  document.getElementById('largo').classList.toggle('textoCompleto');

  texto == 'Leer mas...' ? texto = "Leer menos..." : texto = "Leer mas...";
  condicional.innerHTML = texto;
}
.more {
  cursor: pointer;
  background-color: #ccf;
}

.text-comment {
  overflow-wrap: break-word;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 260px;
  height: 10.2em;
  white-space: nowrap;
}

.textoCompleto {
  height: auto;
  width: auto;
  white-space: normal;
}
<div id="largo" class="text-comment">
  <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 id="more">Leer mas...</span>
  </p>
</div>

1

Una alternativa sólo HTML+CSS usando checkbox y selectores hermanos.

.more {
  cursor: pointer;
  background-color: #ccf;
}

.complete {
  display: none;
}

input.showmore {
  display: none;
}

input.showmore~label.more span.menos {
  display: none;
}

input.showmore:checked+.complete {
  display: block;
}

input.showmore:checked~label.more span.mas {
  display: none;
}

input.showmore:checked~label.more span.menos {
  display: inline;
}
<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>
    <input id="showmore_1" type="checkbox" class="showmore">
    <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>
    <label for="showmore_1" class="more">Leer <span class="mas">mas</span> <span class="menos">menos</span> ...</label>
  </p>
</div>

<div class="text-comment">
  <p class="text-par">"Thanos"</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>
    <input id="showmore_2" type="checkbox" class="showmore">
    <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>
    <label for="showmore_2" class="more">Leer <span class="mas">mas</span> <span class="menos">menos</span> ...</label>
  </p>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.