Artículo

---

1 ¡votar!

Crea un efecto acordeón para tu web con el plugin Easy Accordion

Easy Accordion es un plugin desarrollado para jQuery que te permite crear un efecto acordeón para tu web. Cuando hablamos de acordeón, nos referimos a solapas horizontales deslizables para un lado u otro.

El plugin lo que hará será ir ocultando capas y mostrando solo aquella en la que hayamos pulsado de nuestro diseño. Pueden ver un ejemplo en el siguiente enlace.

Entre las características de este plugin destacan:

• Crear un efecto acordeón de forma sencilla.
• Configurarlo para que se mueva de forma automática.
• Añadir múltiples instancias del efecto en una misma página.
• Activar el control cuando el usuario cargue la página.
• Incluir o remover el número de elementos.
• La forma de mostrar el resultado es totalmente personalizable con propiedades CSS.
• Librería muy ligera.

Para poder utilizarlo, lo primero que debemos de hacer es crear la estructura que formará parte del acordeón. Esto lo meteremos dentro de un contenedor, al que le añadiremos los elementos.

<div id="your-accordion-container">
<dl>
<dt>Title slide</dt>
<dd>You can put here any kind of content (divs, text, images, etc.)...</dd>
<dt>One more</dt>
<dd>You can put here any kind of content (divs, text, images, etc.)...</dd>
<dt>Another slide</dt>
<dd>You can put here any kind of content (divs, text, images, etc.)...</dd>
</dl>
</div>

Para ponerlo en marcha, debemos de hacer la llamada al javascript.

$('#your-accordion-container').easyAccordion();

Esta es la forma más sencilla de hacerlo, y creará el efecto estándar. Ahora si queremos que el efecto se mueva de forma automática, deberemos de pasarle unos parámetros.

$('#your-accordion-container').easyAccordion({ 
autoStart: true,
slideInterval: 5000
});

De esta forma le indicamos que el paso de las capas es automática cada 5 segundos.

El plugin está probado para los siguientes navegadores:

• Firefox 3.5+
• IE6/7/8
• Safari 5+

Google Chrome

Publicado por: angel carrero

Recomendar a un amigo

Compartir en redes

Email  

Comentarios