Todos somos muy ignorantes. Lo que ocurre es que no todos ignoramos las mismas cosas. Albert Einstein
Esta vez haciendo uso de jQuery "una de las librerías más importantes para desarrollar aplicaciones web usando javascript", les presento una sencilla forma de expandir y colapsar un div. Para los más anciosos les tengo el demo de la gente de Webintenta.
el codigo para lograr esto sería el siguiente:
Colapse.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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">
<a href="#" class="close">[x]</a>
<p>Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod tempor
invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</body>
</html>
Cabe recrordarles que la única forma de aprender es lanzarnos a la practica asi que copien el codigo en un archivo html y asegurense de tener jQuery (el cual pueden descargar de acá) en la misma carpeta. y empiezen a jugar con el CSS, también lo pueden pasar el CSS a un archivo externo, para que se vea más limpio el codigo.
Preguntas, dudas, sugerencias a cerca del codigo anterior, de la funcion JavaScript o del CSS, por comentarios. Gracias.
Link de Descarga
Espero les sirva.
9 comentarios:
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
Hola Lewis, Sinceramente no entiedo muy bien tu pregunta: ¿Quieres expandir todos los Divs de una vez? o ¿Quieres que al cerrar el primero automaticamente se abra el segundo y así sucesivamente?.
No te explico mejor, no puedo abrir aleatoriamente los div tengo que abrir el primero y darle al boton con la "x" de cerrar y luego abrir el segundo y volverlo a cerrar y abrir el tercero y cerrar asi sucesivamente, yo quiero abrir el ultimo div o el segundo sin necesidad de tener que abrir en primer lugar el primero y luego el segundo. Cuando trato de abrir en primer lugar el tercer div, por ejemplo, no lo abre. Entiendes? gracias por responder
Ahhh ya te entiendo, Disculpa la demora, mira LEWIS si lo que quieres es tener varias ventanitascolapsables puedes hacer uso de este exelente plugin: http://plugins.jquery.com/files/jquery.accordion_2.zip
O si kieres dame un tiempito hago unas pruebas con el actual, pues la verdad está diseñado para una sola ventanita.
Yo ya lo tengo para varias ventanas, de hecho tengo cuatro ventanas, el problema es que no me las abre aleatoriamente sino en el orden que ya te he explicado.
Lewis Si kieres enviame el codigo, lo analizo y te ayudo dialejo14--hotmail.com
Ya te envie el codigo a tu correo espero me puedas ayudar ok.
Listo Lewis, Solucionado!!!, mira tu correo... Cuenta con nosotros para lo k necesites, de Colombia con mucho cariño. NOTA: Disculpas a todos por nuestro "abandono" del blog, estaremos actualizandolo muy pronto para vincularlo a nuestra web: http://www.kmaleonweb.com/
Muchas gracias. ya lo probé y funciono de maravilla. Ojala y puedan actualizar pronto el blog de todas maneras los estaré visitando en caso de que se me presente algún otro inconveniente. Suerte.
Publicar un comentario