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: 389
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 (530 códigos) (Publicado el 29 de Agosto del 2014)
1.854 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.855 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...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s2751