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.
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.
Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.
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.
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().
var caracteresAMostrar = 300;
var contenido = $(".comentario").html();
if (contenido.length > caracteresAMostrar) {
var resumen = contenido.substr(0, caracteresAMostrar);
var todo = contenido.substr(caracteresAMostrar, contenido.length - caracteresAMostrar);
}
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».
var nuevocontenido = resumen + '' + todo + '
Leer mas...';
$(".comentario").html(nuevocontenido);
El código jQuery de esta parte queda de la siguiente forma:
var caracteresAMostrar = 300;
var contenido = $(".comentario").html();
if (contenido.length > caracteresAMostrar) {
var resumen = contenido.substr(0, caracteresAMostrar);
var todo = contenido.substr(caracteresAMostrar, contenido.length - caracteresAMostrar);
var nuevocontenido = resumen + '' + todo + '
Leer mas...';
$(".comentario").html(nuevocontenido);
}
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:
$(".more").toggle(function() {
$(this).text("Leer menos...").siblings(".complete").show();
}, function() {
$(this).text("Leer mas...").siblings(".complete").hide();
});
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.
