Crear un acordeón horizontal en jQuery
Se le llama acordeón o menú deslizante horizontal a aquel elemento que creamos para que ya sea que automáticamente se deslicen los elementos mostrando información, o que nosotros al darle clic a un elemento de deslice sólo ese elemento y los demás se oculten.
Después del salto les voy a enseñar a usar Easy Accordion que nos permite configurar y crear acordeones de forma muy fácil. Su implementación es muy sencilla, y lo mejor de todo es que podemos usar CSS para configurar todo, por lo que no necesitaremos de mucho esfuerzo para darle un toque personal, les dejo los links de ejemplo y de la página oficial para que lo chequen pero después del salto el código de implementación.
Pagina Web: jQuery Plugin: Easy Accordion
Demos: http://www.madeincima.eu/samples/jquery/easyAccordion/
Descarga: Easy Accordion plugin full sample here (250KB – zip file)
HTML
para poder configurar el acordeón en la parte de HTML les dejo el código:
<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>
Podemos ver primero que el id es opcional y puedes colocar el nombre que quieras, pero debes recordarlo para configurarlo en jQuery. Es muy fácil saber que en las etiquetas <dt></dt> va el título de la pestaña del acordeón, y que donde dice “You can put here any kind of content (divs, text, images, etc.)...” puedes poner tu texto o imágenes o lo que quieras.
Parámetros en jQuery
Del lado de jQuery recuerden que tenemos que adjuntar o mandar a llamar el archivo de acordeón para que después de eso declaremos un nuevo objeto:
$('#your-accordion-container').easyAccordion();
El nombre debe ser el que colocaron en el código HTML así que no se les olvide. Y para poder hacer que el acordeón se pase de elementos automáticamente podemos configurarlo así:
$('#your-accordion-container').easyAccordion({
autoStart: true,
slideInterval: 5000
});
Ahora si, podemos configurar de una forma muy fácil este acordeón que para mí está muy bueno y muy bien construido, espero les haya gustado el tutorial y prueben instalarlo en su sitio web.
