Efecto leer más texto con jQuery

04/Ene/2012 jQuery , 7 Comentarios
programación jquery en español

En el ejemplo de hoy vamos a ver como podemos codificar el efecto leer más texto con jQuery. La idea es tener un texto, del cual solo mostraremos su contenido inicial y un enlace que indique "leer más". Al pulsar sobre el enlace "leer más" se producirá el efecto leer más texto que consiste en mostrar el contenido completo del texto.

Seguro que habéis visto el efecto leer más texto en muchas web, como por ejemplo en los comentarios de YouTube.

Lo primero será poner el texto en nuestra página. El texto será completo y se encontrará dentro de una capa DIV.

  1. <div class="comentario">
  2. 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.<br>
  3. Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.<br>
  4. 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.
  5. </div>

Siempre que utilicemos jQuery es bueno el utilizar clases o indicadores para acceder a los elementos. En este caso hemos utilizado el id "comentario" para identificar claramente nuestro texto.

Ahora ya vamos con nuestro código jQuery, el cual colocaremos en la cabecera de nuestra página dentro del método .ready().

Acordaros que el método .ready() se ejecuta una vez que se ha cargado toda la página, asegurando así la consistencia de nuestro código a la hora de acceder a los elementos.

Lo primero que hacemos es establecer el número de caracteres que se previsualizarán y extraeremos la subcadena que representan del contenido del texto. El contenido nos lo dará el método .html() sobre la capa "comentario" y la subcadena la conseguimos mediante el método Javascript .substr().

  1. var caracteresAMostrar = 300;
  2. var contenido = $(".comentario").html();
  3.  
  4. if (contenido.length > caracteresAMostrar) {
  5. var resumen = contenido.substr(0, caracteresAMostrar);
  6. var todo = contenido.substr(caracteresAMostrar, contenido.length - caracteresAMostrar);
  7. }

En la variable resumen dejamos el resumen de texto a mostrar, mientras que en la variable todo dejamos el resto del contenido.

Ahora, con estos textos vamos a modificar la estructura de la página (si nos hubiesen dado esta estructura previa nos ahorraríamos estos pasos, pero hemos preferido partir de un texto completo).

En la nueva estructuración crearemos dentro del DIV el texto, un SPAN donde tendremos el resto del texto y otro SPAN con la frase Leer Más. Luego veremos que este texto lo modificamos dependiendo de si hay que "Leer más o leer menos".

  1. var nuevocontenido = resumen + '<span class="complete">' + todo + '</span><br><span class="more">Leer mas...</span>';
  2. $(".comentario").html(nuevocontenido);

El código jQuery de esta parte queda de la siguiente forma:

  1. var caracteresAMostrar = 300;
  2. var contenido = $(".comentario").html();
  3.  
  4. if (contenido.length > caracteresAMostrar) {
  5. var resumen = contenido.substr(0, caracteresAMostrar);
  6. var todo = contenido.substr(caracteresAMostrar, contenido.length - caracteresAMostrar);
  7.  
  8. var nuevocontenido = resumen + '<span class="complete">' + todo + '</span><br><span class="more">Leer mas...</span>';
  9. $(".comentario").html(nuevocontenido);
  10. }

Ahora tenemos que codificar el efecto leer más texto en jQuery. Y este paso es sencillo. Ya que si pinchamos sobre "leer más" habrá que hacer visible la parte definida como "more" y poner un texto "leer menos". Y si pulsamos sobre "leer menos" realizaremos el efecto contrario, que será esconder "more" y poner el texto "leer más".

Como estamos hablando de un cambio de estado de un elemento. De nuestro elemento "more". Lo que haremos será apoyarnos en el método .toggle(), el cual efectua una acción u otra cada vez que pulsemos sobre el elemento.

El código jQuery quedará de la siguiente forma:

  1. $(".more").toggle(function() {
  2. $(this).text("Leer menos...").siblings(".complete").show();
  3. }, function() {
  4. $(this).text("Leer mas...").siblings(".complete").hide();
  5. });

Vemos que utilizamos varios métodos de jQuery:

  • .text(), nos permite cambiar el texto del elemento por "leer menos" o "leer más".
  • .siblings(), nos permite acceder a los elementos que está en nuestra misma estructura del DOM, el id se lo pasamos por parámetro.
  • .show(), muestra el contenido del elemento.
  • .hide(), oculta el contenido del elemento.

Con esto ya tenemos todo nuestro código jQuery y el efecto leer más texto conseguido.

Vídeos sobre jQuery


7 comentarios en “Efecto leer más texto con jQuery”

Víctor Cuervo

Halford

Y si en el texto existen etiquetas como o , osea texto enriquecido, no funciona con ese jquery.

Víctor Cuervo

Rubén

@Manu

var caracteresAMostrar = 500;
//Crea un bucle con cada elemento con la clase ‘comentario’
$(“.comentario”).each(function(){
//Para obtener al contenido de cada elemento basta con la palabra clave ‘this’
var contenido = $(this).html();

if (contenido.length > caracteresAMostrar) {
var resumen = contenido.substr(0, caracteresAMostrar);
var todo = contenido.substr(caracteresAMostrar, contenido.length – caracteresAMostrar);
var nuevocontenido = resumen + ” + todo + ‘…Leer más…‘;
$(this).html(nuevocontenido);
}
});

Víctor Cuervo

Manu

Hola ¿Qué tal?

La verdad que el ejemplo funciona de maravilla pero lo he intentado repitiendo otro comentario pero me crea conflicto con los class ¿Como podría solucionarlo?

Mil gracias de antemano y hasta pronto.

Víctor Cuervo

Luis esqueda

Hola quetal, muy bueno tu ejemplo pero lo quiero adaptar a joomla, pero nose como hacer para que funcione el codigo ya que me sale el texto leer mas y menos pero no mete en el contenedor los caracteres y los esconde.
Lo tengo asi:

article->text); ?>

Se supone que el echo cuando ya se trae el texto deberia de funcionar pero algo creo que lo tengo mal. Como podria hacer para que me agarre los datos dinamicos en Mysql?

Gracias.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*