Mootools Accordion

11 de Octubre, 2007

Accordion fue uno de los primeros efectos javascript que utilicé y el que me hizo conocer a los desarrolladores de Mootools. El acordeón lo utilice por primera vez con una librería(de los mismos creadores de Mootools) llamada moo.fx. Ahora el acordeón forma parte de Mootools y es lo que les mostraré a continuación. Breve explicación y varios ejemplos.

Primer acordeón

Un acordeón sencillo está formado por varias secciones. Cada sección tiene un titulo y un contenido, siendo cada uno un elemento diferente. Para construir un Mootools Accordion solo necesitamos crear una instancia de Accordion y pasarle dos parámetros, el primero es un juego de elementos que harán de títulos de cada sección, y otro juego de elementos que serán los contenidos de cada sección. Para armar estos juegos de elementos te resultará muy útil pegarle una leída a los artículos sobre DOM, sobre todo al que habla sobre la función $$.

Vamos al ejemplo, primero el HTML

<div id="miAcordeon">
	<h1>Link 1</h1>
	<div>Este es el contenido del link 1</div>
 
	<h1>Link 2</h1>
	<div>Este es el contenido del link 2</div>
 
	<h1>Link 3</h1>
	<div>Este es el contenido del link 3</div>
 
	<h1>Link 4</h1>
	<div>Este es el contenido del link 4</div>
 
	<h1>Link 5</h1>
	<div>Este es el contenido del link 5</div>
</div>

Observa que en el ejemplo, los h1 hacen de titulo y los divs hacen de contenido. Y ahora el javascript:

1	new Accordion('#miAcordeon h1', '#miAcordeon div');

Como se ve en el código javascript, el primer parámetro es el juego de títulos, seleccionamos todos los tags h1 que están dentro del div miAcordeon.
El segundo parámetro son los elementos que poseen el contenido, en este caso, todos los divs que están dentro del div miAcordeon.

Para que funcione correctamente es importantísimo que el documento HTML que utilices tenga un doctype XHTML.

Opciones

El acordeón trae varias opciones que permiten modificar ciertos comportamientos.

show
Nos permite indicar el índice de la sección que debe aparecer abierta al comienzo.

new Accordion('#miAcordeon h1', '#miAcordeon div',
{
	show: 2
});

display
Nos permite indicar el índice de la sección que debe abrirse(con transición) al comienzo.

new Accordion('#miAcordeon h1', '#miAcordeon div',
{
	display: 2
});

fixedHeight
Cada vez que se abre una sección del acordeón, se abre tanto como sea el tamaño de su contenido. Con fixedHeight podemos modificar este comportamiento e indicar un tamaño (alto) fijo e igual para todas las secciones.

new Accordion('#miAcordeon h1', '#miAcordeon div',
{
	fixedHeight: 500
 
});

height
La transición de apertura y cierre se puede quitar cambiando el valor de height a false.

new Accordion('#miAcordeon h1', '#miAcordeon div',
{
	height: false
 
});

opacity
Lo mismo sucede con la transición de transparencia que tiene cada vez que se abre o se cierra una sección, se puede desactivar cambiando el valor de opacity a false.

new Accordion('#miAcordeon h1', '#miAcordeon div',
{
	opacity: false
 
});

alwaysHide
En principio se puede observar que siempre queda una sección abierta y que no se puede cerrar por más que hagamos click sobre su título. Si deseamos cambiar este comportamiento solo debemos colocar el valor de alwaysHide en true.

new Accordion('#miAcordeon h1', '#miAcordeon div',
{
	alwaysHide: true
 
});

width
Cambiando el valor de width a true, pasamos de un acordeón vertical a uno horizontal… bueno, casi. Es necesario que tanto a los titulos como a los elementos de contenido les coloques con CSS float:left.

new Accordion('#miAcordeon h1', '#miAcordeon div',
{
	width: true
 
});

Me costó hacerlo funcionar(lo puedes ver en la página de ejemplos) y solo lo logré luego de combinar la opción width con fixedWidth.

fixedWidth
Igual que fixedHeight, pero en este caso establecemos un ancho fijo(para acordeones horizontales).

new Accordion('#miAcordeon h1', '#miAcordeon div',
{
	fixedWidth: 100
 
});

Eventos

Tenemos dos eventos nuevos(ademas de los que se heredan de Fx.Elements), onActive y onBackground. El primero es para indicar la función que se ejecuta cada vez que una sección comienza a abrirse. El segundo, es para indicar la función que se debe ejecutar cada vez que una sección comienza a cerrarse. Ambos eventos reciben dos parámetros, el primero es elemento DOM correspondiente al titulo de la seccion que se esta abriendo/cerrando, y el segundo es el elemento DOM correspondiente al contenido de la sección.

new Accordion('#miAcordeon h1', '#miAcordeon div',
{
	//Cuando se abre, agregamos la clase 'seleccionado' al titulo
	onActive: function(titulo, contenido)
	{
		titulo.addClass('seleccionado');
	},
	//Cuando se cierra, quitamos la clase 'seleccionado' del titulo
	onBackground: function(titulo, contenido)
	{
		titulo.removeClass('seleccionado');
	}
});

Métodos

addSection(titulo, contenido, indice)
Nos permite agregar una nueva sección mediante javascript. Recibe tres parámetros, el primero es el elemento DOM correspondiente al título de la sección, el segundo es el elemento DOM correspondiente al contenido de la sección y el tercero es el indice o posición donde se insertará la nueva sección.

var miAcordeon = new Accordion('#miAcordeon h1', '#miAcordeon div');
 
var nuevoLnk = new Element('h1').appendText('Nuevo elemento');
var nuevoEl = new Element('div').appendText('Este es el contenido del nuevo elemento');
 
miAcordeon.addSection(nuevoLnk, nuevoEl, 1);

display(indice)
Es posible que en algún momento necesitemos que se abra una sección en particular cuando toquemos cierto link o en caso de tal o cual evento. display nos permite abrir una sección y para ello debemos indicarle el indice que corresponde de dicha sección.

var miAcordeon = new Accordion('#miAcordeon h1', '#miAcordeon div');
 
miAcordeon.display(1);
//se abrirá la segunda sección

Y esto es todo, el resto es CSS y un poco de ingenio para aprovechar los eventos y alguno de los muchos efectos que nos permite realizar mootools. No olvides mirar los ejemplos.

Articulos Relacionados

Suscríbete para seguir el blog Comparte este artículo
Escrito por Federico Archivado en Mootools en español

25 comentarios en “Mootools Accordion”

Arcadio Dijo:
Octubre 11, 2007 a las 12:33 pm
excelente….
Federico Dijo:
Octubre 15, 2007 a las 8:47 pm
tikitakfire Dijo:
Noviembre 11, 2007 a las 7:10 am
hola! muy buen tutorial! como hago para que aparezcan todos cerrados?
Federico Dijo:
Noviembre 12, 2007 a las 9:51 pm
Hola, creo que esto te sirve:

new Accordion(’.titulos’, ‘.contenidos’,
{
display: false
});

Saludos
extruendo Dijo:
Noviembre 13, 2007 a las 4:10 pm
Hola, he logrado colocar el accordion dentro de un boletin informativo, al dar click aparezca un formulario (este se encuentra al final del boletin), hasta ahi todo bien ,pero al momento de desplegar el accordion me lanza al principio del boletin, como hago para q no me mande hacia arriba????

saludos
Federico Dijo:
Noviembre 13, 2007 a las 5:40 pm
Deberias mostrarme como lo armaste (codigo fuente) y asi quiza pueda ayudarte un poco mejor.

Quiza colocaste enlaces con # en los titulos de cada seccion del acordeon? ese puede ser uno de los motivos por lo cual la pagina se va para arriba. En ese caso, deberias detener el evento.

De esta url: http://www.jourmoly.com.ar/ejemplos/mootools/element/event/ejemplos.html

Revisa el ejemplo correspondiente a Event.stop(), al final.

Saludos
extruendo Dijo:
Noviembre 14, 2007 a las 2:26 am
Si, le puse un #
Click para abrir

no soy experto en codigo pero estoy intentando hacerlo con el link q me diste,pero no sale.
oberkom Dijo:
Enero 6, 2008 a las 5:37 pm
Gracias por el acordeón horizontal !!!
Ramon Dijo:
Febrero 22, 2008 a las 6:03 pm
Excelente tutorial felitaciones, muchas gracias por este aporte
mecano Dijo:
Marzo 26, 2008 a las 1:27 pm
una duda el Acordeon solo funciona con elementos H …=?
es decir no puedo poner dos divs o en otro caso un que contenga información y el div …?
Federico Dijo:
Marzo 27, 2008 a las 8:54 am
Use h1 y div como ejemplo, pero creo recordar haberlo usado con otros elementos, la clave esta en pasarle correctamente dichos elementos, por ejemplo:

new Accordion(’#miAcordeon div.titulo’, ‘#miAcordeon div.contenido’);

y el acordeon seria algo como:

<div id="acordeon">
<div class="titulo">Titulo</div>
<div class="contenido"> Texto del contenido</div>

<div class="titulo">Titulo 2</div>
<div class="contenido"> Texto del contenido 2</div>
</div>

Saludos
Fran Dijo:
Mayo 6, 2008 a las 6:56 am
Hola a todos,

tengo un accordion horizontal, y me gustaría que de inicio estuvieran los 3 contenidos visibles, aunque no con el ancho que podría tener, claro, sino al 33%.

¿Es posible eso?

Saludos.
Federico Dijo:
Mayo 6, 2008 a las 9:50 am
Habria que investigarlo :P, pero, lo que deseas no es algo similar a esto? link

Quizas puedas adaptarlo
Fran Dijo:
Mayo 6, 2008 a las 1:10 pm
Hum, no es exactamente… porque quiero que sea un acordeón… aunque quizá al hacer click en cualquier elemento… se puede convertir en un acordeón… y ya funcionar como tal…

Lo probaré y os cuento,

Saludos
Fran Dijo:
Mayo 7, 2008 a las 3:33 am
Hola chicos, lo conseguí :)

Al final combiné las dos cosas, y la verdad es que el resultado ha sido bastante bueno.

Si lo quereis ver, visitad http://www.etconsultors.com en la sección de SERVICIOS.

Saludos y gracias por el tutorial
Introducción a MooTools Dijo:
Mayo 7, 2008 a las 4:10 am
[…] Acordión. […]
Federico Dijo:
Mayo 7, 2008 a las 9:56 am
Fran, gracias por compartirlo!
Koperator Dijo:
Mayo 8, 2008 a las 4:58 am
Hola!

Una cosultilla:

Estuve tratando de poner 2 acordeones independientes en un mismo documento, pero aparece un efecto indeseable para lo que estoy haciendo, los dos acordeones interactuan entre si; me explico: Necesito que al pulsar un elemento del acordeon ‘a’ no se oculten los elementos del acordeon ‘b’ y vice versa. He probado haciendo otros estilos, cambiando los ids de los elementos, cambiando las variables, etc., pero hasta hoy no lo consigo… en tu experiencia, dime… es posible hacer lo que necesito?

Un saludo!
Fran Dijo:
Mayo 8, 2008 a las 9:53 am
Hola Federico,

¿Es posible que, una vez creado el accordion, pueda borrar elementos de él, o eliminar el accordion? Con algún removeSection, o alguna función del accordion.

Lo necesito para volver a la pantallita inicial cuando cambie a otra sección de la web.

Saludos y gracias por adelantado.
Federico Dijo:
Mayo 8, 2008 a las 10:22 am
@Koperator, Claro que es posible, observa cuantos acordeones hay en la pagina de ejemplos. Debes estar repitiendo algun nombre o utilizando mal las variables, verifica los ejemplos.

@Fran, podés usar $(’idDelElemento’).remove(); para borrar directamente el acordeon, tambien podés ocultarlo con estilos mas o menos asi $(’idDelElemento’).setStyle(’visibility’, ‘hidden’);
idDelElemento: Es el id del elemento HTML principal de tu acordeon, el contenedor del acordeon, etc… Borrarias o ocultarias el elemento y todo su contenido.

Espero que les sirva
Fran Dijo:
Mayo 13, 2008 a las 5:49 am
Hola de nuevo Federico,

no me ha funcionado el remove(), ya que además de quitarme el accordion… me quita todo el div, jejeje.

Lo he hecho de otra forma, un pelín más cutre… pero 100% efectiva.

Gracias por todo.
Federico Dijo:
Mayo 13, 2008 a las 8:45 pm
Me alegro Fran

Exitos!
Guindillas Dijo:
Agosto 17, 2008 a las 8:03 pm
Hola:

Yo tengo un problema que hace que no pueda usar el accordion. Supongamos que tengo un accordion con 5 secciones. Tengo abierta la primera y en ella hay un link a un ancla (<a href=”#…”) de la sección 4.

Como la sección 4 no está desplegada, el link no funciona. Tendría que cerrar la sección 1, abrir la cuarta y colocarse en el ancla.

Mis conocimientos de JavaScript son limitados, acabo de comenzar con Mootools y necesito ayuda.

Gracias anticipadas.
Guindillas Dijo:
Agosto 27, 2008 a las 12:19 pm
Hola de nuevo:

¿Nadie tiene este problema con Mootools, accordion y anclas? Quizás lo resolveis de otra forma…

¿Una ayudita por favor?

Gracias por vuestra atención.
Sergio Dijo:
Septiembre 30, 2008 a las 3:38 pm
Hola Federico: espero que todavia esto este funcinando. Te comento cual es mi problema. necesito como dijeron antes por aqui pones 2 acordeones independientes pero que automaticamente cuando se carga la pagina ya se despliegues, no hacienco cliek en un link. He tratado de hacerlo siempre con mootools y no puedo lograrlo. no tengo conocimientos de script pero uso bastante la logica y nada. Agradeceria tu respuesta, un abrazo desde córdoba. Sergio.

Deja tu comentario

El blog funciona con Wordpress y Simpla theme

JOURMOLY