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.033 visualizaciones desde el 29 de Agosto del 2014. Una media de 14 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.034 visualizaciones desde el 29 de Agosto del 2014. Una media de 14 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