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
Val: 418
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

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


JQuery

Actualizado el 11 de Diciembre del 2019 por Xavi (Publicado el 29 de Agosto del 2014)
1.676 visualizaciones desde el 29 de Agosto del 2014
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

limitar-visualizacion-div

Versión 1

Publicado el 29 de Agosto del 2014gráfica de visualizaciones de la versión: Versión 1
1.677 visualizaciones desde el 29 de Agosto del 2014
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
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2751