Código de JQuery - Limitar la visualización de un texto y permitir mostrarlo y esconderlo con efecto transition de css3

Imágen de perfil

Limitar la visualización de un texto y permitir mostrarlo y esconderlo con efecto transition de css3gráfica de visualizaciones


JQuery

Publicado el 29 de Agosto del 2014 por Xavi
1.315 visualizaciones desde el 29 de Agosto del 2014. Una media de 7 por semana
Este código muestra como reducir el tamaño de un div que contiene un texto, para mostrar unicamente una parte del contenido del texto, y permitir mediante un botón de más y menos visualizar el resto del contenido

Versión 1

Publicado el 29 de Agosto del 2014gráfica de visualizaciones de la versión: Versión 1
1.316 visualizaciones desde el 29 de Agosto del 2014. Una media de 7 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
<!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>
    $(document).ready(function(){
		// bucle por todos los objetos con el class texto
		$(".texto").each(function(){
 
			// Si la altura del div es superior a 50 pixeles disminuiremos el
			// tamaño del div
			if($(this).height()>50)
			{
				// Añadimos el botón para amplicar el el cuadro para visualizar
				// el texto entero y añadimos la clase "min" al div que limita
				// la altura.
				$(this).append("<div class='mas'>+</div>").addClass("min");
			}
 
			// mostramos el contenido de la clase texto (por defecto esta con
			// display:none;
			$(this).show();
		});
 
		$(".texto .mas").click(function(){
			if($(this).parent("div").hasClass("min"))
			{
				$(this).parent("div").removeClass("min");
				$(this).html("-");
			}else{
				$(this).parent("div").addClass("min");
				$(this).html("+");
			}
		});
	});
	</script>
 
	<style>
	.texto {
		border:1px solid #808080;
		font-family:Arial;
		font-size:14px;
		overflow:hidden;
		padding:5px;
		position:relative;
		width:300px;
		max-height:1000px;
		display:none;
		transition: 0.5s ease;
	}
	.texto.min {
		max-height:50px;
	}
	.texto .mas {
		background-color:#808080;
		bottom:0px;
		cursor:pointer;
		font-size:18px;
		font-weight:bold;
		height:19px;
		opacity:0.7;
		position:absolute;
		right:0px;
		text-align:center;
		width:19px;
	}
	</style>
</head>
 
<body>
 
<div class="texto">
	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.
</div>
 
<p>&nbsp;</p>
 
<div class="texto">
	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.
</div>
 
<p>&nbsp;</p>
 
<div class="texto">
	El texto no hace crecer el recuadro mas de 50 pixeles... no aparece la opcion de ver mas o menos texto
</div>
 
</body>
</html>



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


No hay comentarios
 

Comentar la versión: Versión 1

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

http://lwp-l.com/s2751