JQuery: expandir y colapsar un div

18 COMENTARIOS  -  11/11/2007 -  Clasificado en: , ,

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 » »

Si te ha gustado, puedes compartir este post en...
Posts Relacionados
Comentarios
Comentario realizado el 10/12/2008
Claudio hola.. con respecto al xpandir y colapsar un div... como se puede hacer para que empieze ya expandido ???
Comentario realizado el 10/12/2008
Francisco Tienes que poner

display: block;

en vez de

display: none;

en la definicion CSS de #caja
Comentario realizado el 08/01/2009
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?
Comentario realizado el 04/05/2009
William Muñoz Excelente amigo, gracias, me será sumamente útil
Comentario realizado el 05/06/2009
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
Comentario realizado el 05/06/2009
Francisco 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
Comentario realizado el 12/10/2009
carlos gracias esta muy interesante
Comentario realizado el 09/11/2009
Dog Leads And Collars Very useful thankyou.
Comentario realizado el 27/11/2009
Sebas Hola quisiera saber si se pueden colocar varios divs con su info oculta en un mismo html, yo lo estoy probando pero el no me funciona, que debo modificar?
Muchas gracias desde ya, es importante que pueda resolverlo.
Comentario realizado el 07/12/2009
N-Designs great. thank you.
Comentario realizado el 11/12/2009
adsdfs great how do you use more that one on a page?
Comentario realizado el 10/02/2010
Oscar González asi es como lo estoy usando y me va muy bien con dos al mismo tiempo.
$(function(){
$("#quienes").click(function(event) {
event.preventDefault();
$("#caja").slideToggle();
});
$("#caja a").click(function(event) {
event.preventDefault();
$("#caja").slideUp();
});

$("#portafolio").click(function(event) {
event.preventDefault();
$("#caja2").slideToggle();
});
$("#caja2 a").click(function(event) {
event.preventDefault();
$("#caja2").slideUp();
});
});

Solo hay que crear nuevas id que se usan en cada div.
espero les sirva.
Comentario realizado el 28/03/2010
nike shox great how do you use more that one on a page?
Comentario realizado el 29/03/2010
yash i am having some problem,

I have used a jquery to collapse tab's div ,
But i don't want to be open all div together, i mean once click on a graphics design tab it will open it's hidden div, same time i click on the other tab, but now this time the other opened div should be closed automatically, actually i am not so smart in jquery so could you please help me ?

Please hep me to code this.

Thanks
with regards
yash
Comentario realizado el 11/04/2010
Oscar González Yash, to do that, just add the .slideUp function for the other boxes when activate .slideToggle from the one you want.
I hope this code (i will repeat but with the explanation to close the others divs) were usefull for everybody.

$(function(){
$(\"#quienes\").click(function(event) {
event.preventDefault();
$(\"#caja\").slideToggle(); //open the first box
$(\"#caja2\").slideUp(); //close the second \"div\" if is open
$(\"#caja3\").slideUp(); // close the third \"div\" if is open
});
$(\"#caja a\").click(function(event) {
event.preventDefault();
$(\"#caja\").slideUp(); //close first
});

$(\"#portafolio\").click(function(event) {
event.preventDefault();
$(\"#caja2\").slideToggle(); //open second
$(\"#caja\").slideUp(); //close first
$(\"#caja3\").slideUp(); //close third
});
$(\"#caja2 .close\").click(function(event) {
event.preventDefault();
$(\"#caja2\").slideUp(); //close second
});
$(\"#contacto\").click(function(event) {
event.preventDefault();
$(\"#caja3\").slideToggle(); //open third
$(\"#caja\").slideUp(); //close first
$(\"#caja2\").slideUp(); //close second
});
$(\"#caja3 .close\").click(function(event) {
event.preventDefault();
$(\"#caja3\").slideUp(); //close third
});
});

Regards!
Oscar G.
Comentario realizado el 15/04/2010
Danila Hola Oscar, de verdad muchas gracias, al igual que varios que leo aqui soy inexperta, pero creo que la mas inexperta de todos.
Estaba leyendo tu respuesta a adsdfs y eso es lo que me interesa, es mucho pedirte si puedes poner el ejemplo completo?
La verdad es que me complico mucho y me encataia poder hacerlo. De antemano muchas gracias!!!!!
Comentario realizado el 26/05/2010
Mark another sample here http://kobru.ru/files/scripts/100510/index.html
Comentario realizado el 11/08/2010
lewis mora ok escribo a ver si me pueden ayudar ya logre colocar varios div los cuales expanden con una información mi problema es el siguiente, tengo que expandir el primer div y darle en la x de cerrar para que pueda abrir el segundo, y darle click en la x de cerrar en el segundo para poder abrir el tercero, no se puede expandir en otro orden por favor ayudita.
Gracias
Deja un comentario

¡Gracias por dejar tu opinión! Por favor procura que tu comentarios sean apropiados respecto al tema tratado en la entrada; que no sean spam, u ofensivos, de otro modo, serán eliminados. Todos los comentarios serán moderados antes de su publicación por lo que su aparición en la web puede verse aplazada un cierto tiempo. Si deseas realizar algún comentario, crítica o sugerencia sobre la propia web puedes hacer a través de la siguiente dirección de correo: webintenta@webintenta.com

Facebook Twitter