JQuery: expandir y colapsar un div

11 COMENTARIOS -  Publicado hace 28 meses -  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 » »

Algunas entradas relacionadas:

También te puede interesar:

Bienvenido a Intenta. Has venido desde ; si andabas buscando algo espero que este post satisfaga tus expectativas.

IndexRank

IndexRank

Calendar Eightysix

Eightysix Calendar

timeago: un plugin de jQuery

timeago: un plugin de jQuery

Crear un diseño web con elementos 3D con Photoshop

Crear un diseño web con elementos 3D con Photoshop

MPCStar: reproductor de video con codecs incluidos

MPCStar: reproductor de video con codecs incluidos

COMENTARIOS

Publicado hace 15 meses
Claudio -   http://acomodate.cl.tc

hola.. con respecto al xpandir y colapsar un div... como se puede hacer para que empieze ya expandido ???
Publicado hace 15 meses
Francisco -   http://www.webintenta.com

Tienes que poner

display: block;

en vez de

display: none;

en la definicion CSS de #caja
Publicado hace 14 meses
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?
Publicado hace 10 meses
William Muñoz -   http://www.prayel.com.ve

Excelente amigo, gracias, me será sumamente útil
Publicado hace 9 meses
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
Publicado hace 9 meses
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
Publicado hace 5 meses
carlos -   http://www.afroservidores.com

gracias esta muy interesante
Publicado hace 4 meses
Dog Leads And Collars -   http://www.dogleadshop.co.uk

Very useful thankyou.
Publicado hace 4 meses
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.
Publicado hace 3 meses
N-Designs -   http://www.nazcarpine.com/

great. thank you.
Publicado hace 3 meses
adsdfs -  
great how do you use more that one on a page?
Publicado hace 1 mes
Oscar González -   http://www.versvs.com.mx

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.
Haz 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