Código de JQuery - Recortar el texto de un div para posteriormente permitir visualizarlo

Imágen de perfil

Recortar el texto de un div para posteriormente permitir visualizarlográfica de visualizaciones


JQuery

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 03 de Septiembre del 2014 por Xavi
2.585 visualizaciones desde el 03 de Septiembre del 2014. Una media de 28 por semana
Código que dada una cadena superior a 100 caracteres, la recorta y añade al final del mismo un texto de "(más)" para mostrar todo el contenido nuevamente. De igual forma, aparece el texto "(menos)" al final para recortarlo posteriormente.

El funcionamiento del mismo, es que se guardan las cadenas de texto en un array de valores de javascript, para de esta manera, poder visualizar nuevamente todo el contenido.

Versión 1
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 03 de Septiembre del 2014gráfica de visualizaciones de la versión: Versión 1
2.586 visualizaciones desde el 03 de Septiembre del 2014. Una media de 28 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Puedes ver un ejemplo aquí
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.11.1.js" type="text/javascript"></script>
 
    <script>
    // Variable que contiene los textos que se encuentren en los <span> dentro
    // de la clase "texto"
	var arrayText=Array();
 
    $(document).ready(function(){
		// bucle por todos los objetos con el class texto
		$(".texto").each(function(){
 
			// apuntador al primer span dentro de la clase .texto
			var firstDiv=$(this).find("span:first-child");
 
			// revisamos que el texto sea superior a 100 caracteres para
			// cortarlo
			if(firstDiv.html().length>100)
			{
				// añadimos el texto entero en un array de JavaScript
				arrayText.push(firstDiv.html());
 
				// ponemos el texto cortado a 100 caracteres
				firstDiv.html(firstDiv.html().substr(0,100)+"...");
 
				// Agregamos un span que nos permitira visualizar más texto
				// La clase "cortado", unicamente nos identifica si estamos
				// viendo el contenido entero o cortado.
				// Añadimos un id con el indice del array, para posteriormente
				// poder mostrar el texto completo.
				$(this).append("<span class='mas cortado' id='"+(arrayText.length-1)+"'>(más)</span>");
			}
 
			// mostramos el contenido de la clase texto (por defecto esta con
			// display:none;
			$(this).show();
		});
 
		// Evento que se ejecuta cuando se pulsa la clase mas
		$(".texto .mas").click(function(){
 
			// Si disponemos de la clase "menos" quiere decir que estamos
			// mostrando el contenido cortado
			if($(this).hasClass("cortado"))
			{
				// añadimos al <span> anterior al pulsado el contenido entero
				// del array de valores. Para saber el indice del array 
				// obtenemos el id del span donde se ha hecho click.
				$(this).prev("span").html(arrayText[$(this).attr("id")]);
 
				// modificamos el texto a "(menos)" y eliminamos la clase "cortado"
				$(this).html("(menos)").removeClass("cortado");
			}else{
				// añadimos al <span> anterior al pulsado el contenido cortado
				// del array de valores. Para saber el indice del array 
				// obtenemos el id del span donde se ha hecho click.
				$(this).prev("span").html(arrayText[$(this).attr("id")].substr(0,100)+"...");
 
				// modificamos el texto a "(mas)" y añadimos la clase "cortado"
				$(this).html("(más)").addClass("cortado");
			}
		});
	});
	</script>
 
	<style>
	.texto {
		border:1px solid #808080;
		font-family:Arial;
		font-size:14px;
		overflow:hidden;
		padding:5px;
		width:300px;
		display:none;
		transition: 0.5s ease;
	}
	.texto .mas {
		cursor:pointer;
		color:blue;
		font-size:12px;
	}
	</style>
</head>
 
<body>
 
<div class="texto">
	<span>Primer texto. Esta comunidad de programadores está diseñado para que tanto programadores aficionados como profesionales puedan disponer de una herramienta completa y actualizada, con el fin de compartir conocimientos, resolver dudas o publicar sus propias creaciones.</span>
</div>
 
<p>&nbsp;</p>
 
<div class="texto">
	<span>Segundo texto. Esta comunidad de programadores está diseñado para que tanto programadores aficionados como profesionales puedan disponer de una herramienta completa y actualizada, con el fin de compartir conocimientos, resolver dudas o publicar sus propias creaciones.</span>
</div>
 
<p>&nbsp;</p>
 
<div class="texto">
	<span>Texto inferior a 100 caracteres... no aparece la opcion de ver mas o menos texto</span>
</div>
 
</body>
</html>



Comentarios sobre la versión: Versión 1 (1)

Fabian
14 de Diciembre del 2015
estrellaestrellaestrellaestrellaestrella
Es bueno el script pero tengo un problema
Él div class="texto" q contiene el texto de noticias se añade x cada noticia publicada
El span class="más" se van incrementado dentro del div
Es decir dentro de class"texto" la class"mas" me aparece una ves en el siguiente me aparece 2 veces la class " más " y el tercero tres veces y así va incrementando
Como puedo resolver
Responder

Comentar la versión: Versión 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s2754