11107 Suscriptores al Feed del Blog
87 Suscriptores al Feed de Anotaciones Breves
46 usuarios online
Andres en Arte vs Diseño
JQuery: expandir y colapsar un div
11 COMENTARIOS - Publicado hace 28 meses - Clasificado en: JQUERY, AJAX, TIPSJQuery 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>
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.
|
|
|
|
|
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. |
