HomeNoticiasExpandir y Colapsar DIV con Jquery

Expandir y Colapsar DIV con Jquery

agosto 15, 2010
por sessionstudio

Tags, , , , ,
2 Comentarios
Email
Expandir y Colapsar DIV con Jquery

Expandir y colapsar un div

Jquery es una de las librerías más potentes que podémos encontrar hoy en día, múltiples herramientas la utilizan y su uso es cada vez más frecuente.

En este pequeño tutorial vamos a ver como hacer un sencillo efecto para expandir y colapsar un div.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<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: #FFFFFF;
}
a{color:#993300; text-decoration:none;}
#caja {
width:70%;
display: none;
padding:5px;
border:2px solid #3E1840;
background-color:#B36292;
}
#mostrar{
display:block;
width:70%;
padding:5px;
border:2px solid #FFFEAB;
background-color:#FFCD59;
}
</style>
</head>
<body>
<a href="#" id="mostrar">EXPANDIR O COLAPSAR DIV</a>
<div id="caja">
<a href="#" class="close">[x] CERRAR</a>
<p>Como expandir y colapsar un div. Este código permite que por medio de jquery podamos expandir y
colapsar un div, editar los colores de fondo y bordes y agregarle los estilos css que quieran.</p>
</div>
</body>
</html>

Ver demo

Descargar Archivos

Otros Artículos

« Anterior
Siguiente »

2 Comentarios en Expandir y Colapsar DIV con Jquery

  1. Pingback: Topsy.com

  2. 16 agosto, 2010 0:26

    Muy buen diseño del blog…! creo que este blog de diseño de páginas web es favorable para la gente si le pones mayor enfasis en tus notas ya que, a mi parecer es bueno.

    Responder

Comentar