El uso del acordion en las páginas webs de ahora son muy usados y es más simple de lo que uno se puede imaginar, sobre todo si lo usas con JQuery. En realidad qué es? Puede ser un <div> oculto que los muestras cuando le das clic a otro DIV, bueno yo uso DIVS pero puedes usar un <p> u otra etiqueta.
Primero creamos los div con la información. Vamos a ponerle un número para poder identificar más rápido los títulos y la información en base a al div en el que se encuentran.

<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

Comparte y disfruta:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogplay
  • MySpace
  • Twitter
  • Yahoo! Bookmarks