<div class="acordion">
 
<div id="item_1" class="item">
 
<div id="titulo_1" class="titulo">Título 1</div>
 
 
<div id="info_1" class="info">Información 1</div>
</div>
 
 
<div id="item_2" class="item">
 
<div id="titulo_2" class="titulo">Título 2</div>
 
 
<div id="info_2" class="info">Información 2</div>
</div>
 
 
<div id="item_3" class="item">
 
<div id="titulo_3" class="titulo">Título 3</div>
 
 
<div id="info_3" class="info">Información 3</div>
</div>
</div>

Hemos encerrado todo en un div con el estilo “acordion”, dentro hay grupos, agrupados por un div con el estilo “item” y dentro hay dos divs, el título (estilo “titulo”) y la información (estilo “info”). Vamos a darle estilo a estas capas.

div.acordion{
	width: 200px;
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
div.item div.titulo{
	background-color: #FF6;
	font-weight: bold;
	text-align: center;
	font-size: 13px;
	padding-top: 3px;
	height: 21px;
}
div.item div.info{
	background-color:#69F;
	padding: 5px;
}

Le hemos dado tamaño, tipografía, colores, bordes, etc. Esto lo puedes cambiar en base a los colores que quieras utilizar o la tipografía, sin que esto percuta con el funcionamiento. Ahora lo que se debe hacer es ocultar la información, para que solo sea mostrada cuando se le de clic al título, esto lo hacemos en el estilo “info”.

div.item div.info{
	background-color:#69F;
	padding: 5px;
	display: none;
}

Ahora veamos el Javascript, yo llamo a los JS antes de cerrar la etiqueta BODY. Vamos a llamar al los JS jquery.js y jquery.easing.js. Además, cuando termine de cargar el documento vamos a hacer que el acordion funcione, para esto vamos a utilizar el método each de Jquery. Esto lo utilizo para que se sepa cual es el título y la información de cada “item”.

<script src="jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="jquery.easing.js" type="text/javascript"><!--mce:1--></script>
<script type="text/javascript"><!--mce:2--></script>

Luego recuperamos el titulo y la información por cada “item”, aquí es donde usamos el número que le pusimos a los divs. Cuando le demos clic al título, su info respectiva se mostrará o se ocultará dependiendo del caso.

$(document).ready(function(){
	$("div.acordion div.item").each(function(){
		var num = $(this).attr("id").split("_")[1]; //RECUPERAMOS EL NÚMERO
		var titulo = "div#titulo_"+num;
		var info = "div#info_"+num;
		$(titulo).click(function(){
			$(info).slideToggle();
		});
	});
});

Como ven, hasta ahí ya funciona el acordio, ahora pongámosle el easing y tiempo, el tiempo es en milisegundos, osea cada 1000 es 1 segundo.

var tiempoAbrir = 1000;
$(document).ready(function(){
	$("div.acordion div.item").each(function(){
		var num = $(this).attr("id").split("_")[1];
		var titulo = "div#titulo_"+num;
		var info = "div#info_"+num;
		$(titulo).click(function(){
			$(info).slideToggle({duration: tiempoAbrir, easing: "easeOutElastic"});
		});
	});
});

Si prueban hasta este punto, van a ver que cuando se abre uno no se cierra el otro. Para que no estén dos abiertos lo que se debe hacer es que cuando se abra uno se guarda en una variable el que está abierto, entonces si se le da clic a otro se cierra primero éste y luego se abre el otro.

var abierto;
var tiempoAbrir = 1000;
var tiempoCerrar = 500;
$(document).ready(function(){
	$("div.acordion div.item").each(function(){
		var num = $(this).attr("id").split("_")[1];
		var titulo = "div#titulo_"+num;
		var info = "div#info_"+num;
		$(titulo).click(function(){
			if(abierto == info){
				$(info).slideUp({duration: tiempoCerrar, easing: "easeInElastic"});
			}else{
				if(typeof abierto == "undefined"){
					$(info).slideDown({duration: tiempoAbrir, easing: "easeOutElastic"});
					abierto = info;
				}else{
					$(abierto).slideUp({duration: tiempoCerrar, easing: "easeInElastic", complete: function(){
						$(info).slideDown({duration: tiempoAbrir, easing: "easeOutElastic"});
						abierto = info;
					}});
				}
			}
		});
	});
});

El plugin jquery.easing.js tiene diferentes tipos de movimientos, los pueden ver en bajando el ejemplo

Mira el ejemplo
Descarga el ejemplo

No olvides dejar tus comentarios

Descargar Ejemplo

Conocer más de JQuery
Conocer más de JSON
Descarga el Add-on Firebug que utilizo en el tutorial
Acerca de la función Sleep en PHP

Por ejemplo, toda la aplicación estaba dentro de un div con el id “data”. Entonces con unas simples líneas de javascript se pudo realizar este cambio sin la necesidad de tocar nada de la aplicación.

Primero están los links dentro del DIV

1
2
3
4
5

<div id="data">
	<a href="link1.html">Link 1</a><br />
	<a href="link2.html">Link 2</a><br />
	<a href="link3.html">Link 3</a>
</div>

Ahora solo llamamos a la librería JQuery y escribímos nuestro código paso a paso

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="data">
	<a href="link1.html">Link 1</a><br />
	<a href="link2.html">Link 2</a><br />
    <a href="link3.html">Link 3</a>
</div>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script language="javascript">
function Cargo(){
	$("#data a").click(function(){
		alert(this.href);
		return false;
	});
}
$(document).ready(Cargo);
</script>

Primero decimos que cuando cargue la página llame a la función “Cargo”, donde todas las etiquetas “<a>” dentro de “<div id=”data”></div>” luego de ser cliqueadas muestren una alerta de la ruta absoluta de su destino pero luego con el “return false;” estamos diciendo que no vaya a ningún sitio.

Lo que vamos a hacer ahora es cargar esta misma ruta en el DIV mediante Ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<div id="data">
	<a href="link1.html">Link 1</a><br />
	<a href="link2.html">Link 2</a><br />
    <a href="link3.html">Link 3</a>
</div>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script language="javascript">
function Cargo(){
	$("#data a").click(function(){
		UpdateDiv(this.href);
		return false;
	});
}
function UpdateDiv(Url){
	$.ajax({
		type: 'get',
		url: Url,
		dataType: 'html',
		success: function(data){
			$("#data").html(data)
		}
	});
}
$(document).ready(Cargo);
</script>

Con este ejemplo hacemos que cargue la página en el “DIV”, pero qué pasa si queremos cargar la información en otro DIV y que sea dinámico según el link? Igual de sencillo. Solamente ponemos un atributo más en la etiqueta “<a>”, “rel”, y lo igualamos al nombre del DIV que queremos que cargue la página.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<div id="data">
	<a href="link1.html" rel="data2">Link 1</a><br />
	<a href="link2.html">Link 2</a><br />
    <a href="link3.html">Link 3</a>
</div>
 
<!-- Aquí estamos creando la otra capa -->
<div id="data2"></div>
 
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script language="javascript">
function Cargo(){
	$("#data a").click(function(){
		UpdateDiv(this.href, this.rel);
		return false;
	});
}
function UpdateDiv(Url, Capa){
	Capa = Capa||"data";
	$.ajax({
		type: 'get',
		url: Url,
		dataType: 'html',
		success: function(data){
			$("#"+Capa).html(data)
		}
	});
}
$(document).ready(Cargo);
</script>

Si quieren que todos los links carguen por ajax, pero algunos no, podemos hacer que el valor de “rel” sea “no-ajax”. Solo cambiamos la función “Cargo” (por cierto, pueden darle cualquier nombre a las funciones)

function Cargo(){
	$("a").click(function(){
		if(this.rel != "no-ajax"){
			UpdateDiv(this.href, this.rel);
			return false;
		}else{
			return true;
		}
	});
}

En este caso, todos los links cargaran por ajax y la información se podrán en el div con el ID igual al valor que tiene el atributo “rel” de los links, excepto los que tengan como valor “no-ajax”

Eso es todo, como ven solo son unas pocas líneas. Todo es cosa de creatividad y hacer las funciones de tal manera que funcione para todos los casos.

No olviden crear las páginas para que no tengan problemas con los 404.

Utilizalo es muy sencillo y más aun que existe una amplia variedad de Widgets para el JQuery. Puedes descargar la librería de JQuery aquí. Bien vemos cómo podemos utilizar esta librería y algunos ejemplos del JQuery.

Primero que nada invocamos al JQuery

1
2
3
4
5
6
7
8

<html>
<head>
<title>JQuery</title>
</head>
<body>
<script language="javascript" src="jquery.js"></script>
</body>
</html>

La sintaxis de JQuery es muy sencilla, ya que siempre es igual y no hay mucha variedad. JQuery se reconoce cuando empezamos con el signo “$” (dólar). Por ejemplo

1

$(elemento).evento(funcion-o-parametro);

Un ejemplo

1
2
3

$('img').mouseover(function(){
     //aquí escribimos algo...
});

Como decia desde un principio, podemos utilizar la sintaxis de los CSS para saber a qué elementos del DOM estamos invocando. En este caso es para podas las etiquetas “img”.
Podemos utilizar otras sintaxis como

1
2
3
4
5
6
7

$('div.logo').click(function(){ //Es para todas las etiquetas "div" donde su atributo "class" sea igual a "logo"
     //aquí escribimos algo...
});
 
$('div.formulario input').focus(function(){ //Es para todas las etiquetas "input" dentro de las etiquetas "div" donde su atributo "class" sea igual a "formulario"
     //aquí escribimos algo...
});

Otras cosas que sorprendentes que vienen con la librería JQuery son los efectos muy fáciles de utilizar.

Cuadro de efectos predeterminados del Jquery

Después que un efecto haya terminado podemos llamar a una función, por ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<div class="texto" style="display: none; width: 320px; position: relative;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus non erat. Sed magna. Sed congue sollicitudin dolor.
In luctus ligula ac neque. Sed nibh velit, euismod at, posuere a, feugiat eu, est.
Curabitur et eros. Sed vitae libero id ipsum accumsan congue.
Duis non risus vitae sem consequat iaculis. Cras volutpat justo vitae eros.
Mauris porttitor nulla eget erat. Cras condimentum volutpat ante.
Mauris fermentum metus id felis. Quisque at neque.
Vestibulum nulla magna, pulvinar sed, porttitor ut, viverra eget, libero.
Donec pretium. Quisque aliquam magna nec lectus rhoncus consequat. Suspendisse euismod.</div>
<script language="javascript" src="jquery.js"></script>
<script language="javascript">
function DespuesSlideDown(){
	$('div.texto').animate({width: 500, top: 80, left: 200});
}
function DespuesSlideUp(){
	$('div.texto').slideDown('slow', DespuesSlideDown);
}
function DespuesFadeIn(){
	$('div.texto').slideUp(2000, function(){
		setTimeout(DespuesSlideUp, 2000);
	});
}
$(document).ready(function(){
	$('div.texto').fadeIn(3000, DespuesFadeIn);
});
</script>

Descargar ejemplo “Empezando con Jquery”

Un ejemplo de cómo se ve un JSON es:

[{"titulo":"Título 1","descripcion":"Descripción 1"},
{"titulo":"Título 2","descripcion":"Descripción 2"},
{"titulo":"Título 3","descripcion":"Descripción 3"}]

Para crear este código con PHP, desde la versión 5.2.6 es muy sencillo, ya que vienen las funciones json_encode y json_decode. La función “json_encode” convierte los arreglos en cadenas de texto en formato JSON y, el “json_decode” convierte cadenas de texto con formato JSON a arreglos, un ejemplo:

 "Título 1", "descripcion" => "Descripción 1");
$arreglo[] = array("titulo" => "Título 2", "descripcion" => "Descripción 2");
$arreglo[] = array("titulo" => "Título 3", "descripcion" => "Descripción 3");
echo json_encode($arreglo);
?>

Veamos un ejemplo en video:

Descargar Paquete utilizado en el video