Para este ejemplo vamos a usar 3 ficheros y nuevamente el fichero de jquery.js que deberemos incluir primero de todo.
El primero de los ficheros, el HTML tendrá una estructura con 4 divs, dos de ellos harán de título del div para entendernos y los otros dos serán los que muestren el contenido.
[caption id="attachment_96" align="aligncenter" width="285" caption="Efecto acordeón"]
[/caption]El fichero HTML sería como este:
<html>
<head>
<title>Validación de formularios con JQuery I</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="general.js"></script>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id ="div1">Menu 1</div>
<div id ="cont1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div id ="div2">Menu 2</div>
<div id ="cont2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</body>
</html>
El fichero CSS, en este caso "estilo.css", sería como se muestra a continuación. Nótese que los divs con identificadores #cont1 y #cont2 están con la propiedad display:none, que hace que al cargar la página no se vean.
#div1{
background-color:#CCCCCC;
width:20%;
border:1px solid #AAAAAA;
padding:0 10px;
}
#cont1{
background-color:#EEEEEE;
width:20%;
border-bottom:1px solid #AAAAAA;
border-left:1px solid #AAAAAA;
border-right:1px solid #AAAAAA;
padding: 10px;
display:none;
}
#div2{
background-color:#CCCCCC;
width:20%;
border:1px solid #AAAAAA;
padding:0 10px;
}
#cont2{
background-color:#EEEEEE;
width:20%;
border-bottom:1px solid #AAAAAA;
border-left:1px solid #AAAAAA;
border-right:1px solid #AAAAAA;
padding: 10px;
display:none;
}
Por último el fichero Javascript, en este caso llamado "general.js", dónde controlaremos cada uno de los clicks que se hagan sobre los divs. De manera que cuando pinchemos en uno se colapsará el div cont del otro y se desplegará el cont que le corresponde.
$(document).ready( function() {
$('#div1').click(function(){
$('#cont1').slideDown('slow');
$('#cont2').slideUp('slow');
});
$('#div2').click(function(){
$('#cont2').slideDown('slow');
$('#cont1').slideUp('slow');
});
});
Esto es todo por hoy. Es algo sencillito, pero la idea es ir familiarizándose con el framework JQuery.
Escuchando... Radiohead - Videotape[kml_flashembed movie="http://www.youtube.com/v/-kCKob1YKOU" width="425" height="350" wmode="transparent" /]
Mola el blog! y el detalle de los videos es cojonudo jejejej
ResponderEliminarPor cierto te he añadido al Google Reader ;)
Lo de los videos ya sabes que siendo yo no podía faltar.
ResponderEliminarIntentaré actualizar de 2 a 3 veces por semana. Si se te ocurre algo que poner no dudes en comentarmelo.
Saludos
Hola:
ResponderEliminarTengo una pega con un accordion de jquery y nadie sabe como solucionarlo.
Haber si me puedes echar una mano, te comento:
lo dicho, tengo un menu con accordion y tal menu tiene pestañas y al pinchar se abre la pestaña; hasta aqui todo perfecto. Pues necesito en la misma web otro menu, igual que el accordion, pero que no se abra al pinchar en la pestaña, vamos, que solo se ve las pestañas. El inconveniente es que yo le pongo un link a estas pestañas y no se por que, no funciona el link.
He escrito en mil sitios y nadie sabe como resolverlo, aquí os dejo la url de la prueba: http://www.nemodigital.com/producto/series/index2.html
Un saludo y gracias.
Muy bueno y simple tu ejemplo, pero si quiero colapsar el DIV abierto que tengo, como hago?
ResponderEliminarMuchas gracias
Hola Joaquin. Lo que pides, si no he entendido mal, es que al pinchar se te abra un div y si vuelves a pinchar sobre él se colapse. Con lo que he puesto en el post se puede hacer. Simplemente tienes que controlar si es la primera o la segunda vez que pinchas. Para ello puedes utilizar una variable que te devuelva ese valor. Yo por ejemplo me he creado esto.
ResponderEliminar$(document).ready( function() {
var i = 0;
var j = 0;
$('#div1').click(function(){
if(i % 2 == 0){
$('#cont1').slideDown('slow');
$('#cont2').slideUp('slow');
i++;
j=0;
}
else {
$('#cont1').slideUp('slow');
i--;
}
});
$('#div2').click(function(){
if(j % 2 == 0){
$('#cont2').slideDown('slow');
$('#cont1').slideUp('slow');
j++;
i= 0;
}
else{
$('#cont2').slideUp('slow');
j--;
}
});
});
No me he complicado mucho la vida y si tu menu es muy grande esto es una movida porque necesitas muchas variables. Tendría que darle alguna vuelta más. De todos modos espero que te sirva.
[WORDPRESS HASHCASH] The poster sent us '0 which is not a hashcash value.
Creo que esta es la solución
ResponderEliminarhttp://www.colorizate.com/jquery-acordion-hack-link-interno/