Efecto leer más texto simplificado con jQuery

06/Ene/2012 jQuery , 10 Comentarios
programación jquery en español

El otro día veíamos como poder generar un efecto leer más texto con jQuery sobre un texto que no tenía estructura predefinida y que se encontraba dentro de un DIV.

Hoy vamos a ver como simplificar este ejemplo si tenemos la estructura del texto predefinida. Con lo que nos quedará un efecto leer más texto simplificado.

Y es que si podemos estructurar el texto sobre el que queremos realizar el efecto sería bueno que lo insertásemos en capas SPAN. En concreto en tres capas SPAN.

  • summary, con el texto de resumen.
  • complete, con el resto del texto.
  • more, con el texto "leer más".

Es importante que utilicemos elementos SPAN ya que estos son inline y se mostrarán todos seguidos, si saltos y darán uniformidad al texto.

La estructura quedará de la siguiente forma:

  1. <span class="summary">
  2. <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>
  3. </span>
  4. <span class="complete">
  5. <p>Pro populo dolorem eu. Justo conclusionemque sea ne. At dicat putent eum. Reprimique delicatissimi vel et.</p>
  6. <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>
  7. </span>
  8. <span class="more">Leer mas...</span>

El código jQuery se quedará simplificado ya que solo tendremos que controlar el .toggle() sobre el elemento "more". Es decir, el cambio de estado de este elemento.

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

En cada uno de los cambios de texto realizamos las tres acciones apoyadas en los métodos .text() para cambiar el texto del elemento "more", .siblings() para ir a por el elemento hermano "complete" y .show()/.hide() para ocultar o mostrar el texto.

Vemos que con la estructuración predefinida de la página se nos simplifica mucho el código jQuery ya que nos evitamos la reestructuración del contenido "al vuelo" con jQuery.

Vídeos sobre jQuery


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

Víctor Cuervo

Dani

Gracias por el tutorial, me ha sido de gran ayuda, pero me surge el siguiente problema. Al usar repetidamente varios “Leer mas” una pagina, cuando clico en uno de ello se expanden todos los textos. Os dejo mi funcion abajo.

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.

Leer mas…

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.

Leer mas…

//Jquery

jQuery(document).ready(function(){
jQuery(“.more”).toggle(function(){
jQuery(this).text(“Read less…”).siblings(“.complete”).show();}, function() {
jQuery(this).text(“Read more…”).siblings(“.complete”).hide();
});
});

PD: No soy muy experto, tenedlo en cuenta 🙂

Gracias de antemano.

Víctor Cuervo

Manuel

Hola Victor
Hasta ahora es un efecto que me ha funcionado perfectamente pero he actualizado la versión de jQuery a la 1.10.2 y ha dejado de hacerlo.
¿Tiene solución?

Muchas gracias

Víctor Cuervo

Ignasi

Hola Víctor Cuervo,

Gracias por este tutorial. Es justo lo que estaba buscando.

Es la primera vez que intento agregar un script de jQuery a una página, y como era de esperar, no me ha funcionado como esperaba…

Cuando ejecuto el HTML en el explorador, de golpe se oculta el elemento que contiene la información adicional. Casi no da tiempo a leer el texto “Ver más”, porque se desvanece redimensionándose hasta desaparecer.

Mi teoría es que me acabo de descargar la última versión de jQuery, la 1.9.0, y quizás en esta versión el evento .toggle() produce un efecto distinto al tuyo… ¿?

Para descartar que hubiera errores en mi página, he copiado tal cual el código que facilitas y me ocurre lo mismo. Aún así, dejando de lado el tipo de efecto, ¿por qué de auto-oculta automáticamente?

¿Sabes cómo puedo conseguir que cuando cargue la página, el texto “Ver más” permanezca hasta que el usuario le dé clic, y que muestre el contenido oculto del mismo modo que lo hace el tuyo? Me gusta el tuyo, que muestra y oculta de golpe, sin efectos de opacidad ni desplazamiento.

Muchas gracias por adelantado,
Ignasi

Víctor Cuervo

Víctor Cuervo

@Fran,

El degradado lo puedes hacer aplicando opacidad. A ver si te sirve esto.
http://lineadecodigo.com/jquery/aplicar-opacidad-con-jquery/

Si no, te recomiendo que lo comentes en el foro de jQuery http://www.dudasprogramacion.com/forum/scripting/jquery/

Saludos.

Víctor Cuervo

Fran

Hola
Muy chulo el efecto y además sencillo.
Estoy haciendo el efecto de leer mas simplificado. Parece que me funciona bien. Pero me gustaria mejorarlo un poco. Como puedo hacer para modificar el boton read more cuando paso el raton por encima. He hecho un degradado en el more y quiero hacer otro con hover, pero cambiando el tono.
Gracias

Víctor Cuervo

Víctor Cuervo

@Woebmaster 74,
La verdad que el jQuery es muy útil. 😀

Víctor Cuervo

Woebmaster 74

Muy bueno. la verdad que jQuery es lo más.

Víctor Cuervo

Víctor Cuervo

@Tomas,
Gracias por el aporte. Muy bueno.

Víctor Cuervo

Tomas Corral

Para obtener este efecto hice en su día una clase JS ‘Cutter.js’ como mejora respecto de lo que comentas es que Cutter.js mantiene el marcado.

Podeis ver un ejemplo muy bueno en: http://ares.softonic.com/

Como podeis apreciar, permite incluso etiquetas de video. 😉

http://tcorral.github.com/Cutter.js/

¿Algo que nos quieras comentar?

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

*

*