JQuery: expandir y colapsar un div

Comentarios: 5
Tags: JQUERY, AJAX, TIPS
Fecha: 11/11/2007

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 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
<script type="text/javascript" src="jquery.js">
<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
<div id="caja">
<p>Lorem ipsum dolor sit amet,...
</div>
</body>
</html>

Demo » »

Descarga de archivos » »

Algunas entradas relacionadas:

Delicious Digg Meneame Fresqui Enchilame Design Float StumbleUpon

1	Claudio http://acomodate.cl.tc hola.. con respecto al xpandir y colapsar un div... como se puede hacer para que empieze ya expandido ???

2	Francisco http://www.webintenta.com Tienes que poner display: block; en vez de display: none; en la definicion CSS de #caja

3	ricardo avalos como hacer para que el despliegue sea de izquierda a derecha y no de arriba ahacia abajo que es como aparece en el articulo?

4	William Muñoz http://www.prayel.com.ve Excelente amigo, gracias, me será sumamente útil

5	Taratupapa Hola, gracias por el documento. Ahora, mi pregunta es como puedo colocar un link dentro del div "caja", porque al hacerlo, cualquier link que coloco me le hace la funcion de cierre de caja, y no de enlace. Espero me puedan ayudar, Gracias, Saludo

Francisco
http://www.webintenta.com

Suponiendo que tengas una clase en el aspa, tal y como en el ejemplo:

<a href="#" class="close">[x]</a>

Cambiando:
$("#caja a").click(function(event) {
Por:
$("#caja .close").click(function(event) {
Te debería bastar para que los enlaces dentro de "caja" funcionen como tales.

Saludos