JQuery: expandir y colapsar un div

JQuery es una de las librerias más importantes surgidas en los últimos tiempos. Han surgido múltiples herramientas que la utilizan y su uso es cada vez más frecuente.

En Flash es posible definir distintas acciones de código ActionScript que se ejecutarán dependiendo del formato en el que se ha publicado la animación, o bien swf, o cualquiera de los formatos de su proyector: exe para Windows y hqx para MacJQuery es una de las librerias más importantes surgidas en los últimos tiempos. Han surgido múltiples herramientas que la utilizan y su uso es cada vez más frecuente. En snipplr nos muestran como hacer un sencillo efecto para expandir y colapsar un div. He añadido un poco de CSS para que sea más visual y he cambiado alguna cosa más y el ejemplo queda de la siguiente forma:

<html>  
	<head>  
	<title>JQuery Collapse</title>  
	<script type="text/javascript" src="jquery.js"></script>  
	<script type="text/javascript">  
		$(function()  {  
		   $("#mostrar").click(function(event) {         
			event.preventDefault();         
			$("#caja").slideToggle();  
			});  
		   $("#caja a").click(function(event) {        
			event.preventDefault();        
			$("#caja").slideUp();  
			});  
		});  
		</script>  
	<style type="text/css">  
		body {  	
		font-family: Verdana, Arial, Helvetica, sans-serif;  	
		font-size: 11px;  	color: #666666;	  
		}  
		
		a{
		color:#993300; text-decoration:none;
		}  
		
		#caja {  	
		width:70%;  	
		display: none;  	
		padding:5px;  	
		border:2px solid #FADDA9;  	
		background-color:#FDF4E1;  
		}  
		
		#mostrar{  	
		display:block;  	
		width:70%;  	
		padding:5px;  	
		border:2px solid #D0E8F4;  	
		background-color:#ECF8FD;  
		}  
		
	</style>  
	</head>  
	<body>  
	<a href="#" id="mostrar">MOSTRAR</a>  
	<div id="caja">  
	<p>Lorem ipsum dolor sit amet,...</p>  
	</div>	
	</body>  
</html>

Autor: webintenta.com
http://www.webintenta.com

Usuarios que han visto este tema también han visto...

- Detecta versiones de Flash con Javascript
- Color de fondo aleatorio
- Expresiones Regulares en JavaScript
- Manejo de errores con JavaScript
- Javascript no intrusivo, CSS y PHP

- Versión imprimible de este documento

- Enviar por e-mail este documento