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.