15 de agosto de 2010 | 10:11 pm
2
Expandir y Colapsar DIV con Jquery
Etiquetas: colapsar div, expandir div, Expandir y colapsar div, Jquery, Noticias, Tutoriales
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.
[ad#Google Adsense-1]
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" />
<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: #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>
[...] This post was mentioned on Twitter by Diseño Web y Gráfico, Diseño Web y Gráfico. Diseño Web y Gráfico said: Nuevo post: Expandir y Colapsar DIV con Jquery http://www.sessionstudio.com.ar/blog/2010/08/15/expandir-y-colapsar-div-con-jquery/ [...]
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.
Gracias!! hace poco lo hice al blog, y lo mantengo como voy podiendo ya que es un proyecto personal a demás de mi trabajo fijo en una empresa. Más los trabajos que llegan a mi estudio.. que podes ver la web sin el /blog asi que mucho tiempo no queda.
Muy buena tu web, felicitaciones a vos tambien!