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:
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...
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.
$(document).ready(function(){
$(".more").toggle(function() {
$(this).text("Leer menos...").siblings(".complete").show();
}, function() {
$(this).text("Leer mas...").siblings(".complete").hide();
});
});
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.
