Easy Accordion jQuery plugin. Un acordión horizontal con Jquery

Artículo escrito por Diseño Web Coruña Martín Iglesias

Easy Accordion jQuery plugin. Un acordi贸n horizontal con Jquery

07 de Octubre de 2010 17,064 veces Ver comentarios

Easy Accordion jQuery plugin. Un acordi贸n horizontal con Jquery

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Hace unas semanas, desarrollando un proyecto, me encontré con la necesidad de utilizar un plugin en jQuery para mostrar distintas opciones o destacados de una web, sin utilizar el típico slide o rotación de imágenes, porque, además de querer contenido en texto, quería no utilizar imágenes ni flash. Por esa razón me decidí por un acordión horizontal en jQuery.

Luego de buscar y descubrir opciones (de pago eso sí) como el archiconocido Slidedeck, pensaba que tenían que existir otros plugins ´gratis´ y entonces me encontré con jQuery Easy Accordion Plugin.

jQuery Easy Accordion es un plugin para jQuery que se encarga mediante un poco de CSS y javascript de tomar el contenido definido dentro de unas listas de definición y ejecutar un acordión que puede ser tanto configurado para usarlo manual como automáticamente.

Su aplicación es muy sencilla y la voy a desarrollar en los códigos posteriores, solo se necesita el plugin .JS (obviamente la librería jQuery), un poco de CSS y tu xHTML con el contenido.

Principales características:

Fácil de crear un efecto de acordeón agradable y suave
Decidir si se ejecuta automáticamente o mediante clicks
Insertar varias instancias del acordeón en la misma página
Definición de la diapositiva activa cuando el usuario carga la página
Incluir o eliminar el número de diapositiva
El texto se rota utilizando las propiedades CSS. No hay necesidad de imágenes!
Es totalmente personalizable mediante CSS: altura, el ancho y rellenos, uso de imágenes de fondo y así sucesivamente
Accesible y SEO
Deslice cualquier tipo de contenido (divs, simple texto, imágenes, listas, etc)
Menos de 8 KB!
No hay dependencias

Realmente te recomiendo que le eches un vistazo a su demo: jQuery Easy Accordion

Código 1 - XHTML
<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>
Código 2 - JAVASCRIPT
$('#your-accordion-container').easyAccordion({ 
   autoStart: true,
   slideInterval: 3000,
   slideNum: false	
});
Código 3 - CSS
/* UNLESS YOU KNOW WHAT YOU'RE DOING, DO NOT CHANGE THE FOLLOWING RULES */
		
.easy-accordion {display:block;position:relative;overflow:hidden;padding:0;margin:0}
.easy-accordion dt,.easy-accordion dd{margin:0;padding:0}
.easy-accordion dt,.easy-accordion dd{position:absolute}
.easy-accordion dt{margin-bottom:0;margin-left:0;z-index:5;/* Safari */ -webkit-transform: rotate(-90deg); /* Firefox */ -moz-transform: rotate(-90deg);-moz-transform-origin: 20px 0px;  /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);cursor:pointer;}
.easy-accordion dd{z-index:1;opacity:0;overflow:hidden}
.easy-accordion dd.active{opacity:1;}
.easy-accordion dd.no-more-active{z-index:2;opacity:1}
.easy-accordion dd.active{z-index:3}
.easy-accordion dd.plus{z-index:4}
.easy-accordion .slide-number{position:absolute;bottom:0;left:10px;font-weight:normal;font-size:1.1em;/* Safari */ -webkit-transform: rotate(90deg); /* Firefox */ -moz-transform: rotate(90deg);  /* Internet Explorer */ filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}
		 
/* FEEL FREE TO CUSTOMIZE THE FOLLOWING RULES */
		
dd p{line-height:120%}

#accordion-1 {width:800px;height:245px;padding:30px;background:#fff;border:1px solid #b5c9e8}
#accordion-1 dl{width:800px;height:245px}	
#accordion-1 dt{height:46px;line-height:44px;text-align:right;padding:0 15px 0 0;font-size:1.1em;font-weight:bold;font-family: Tahoma, Geneva, sans-serif;text-transform:uppercase;letter-spacing:1px;background:#fff url(images/slide-title-inactive-1.jpg) 0 0 no-repeat;color:#26526c}
#accordion-1 dt.active{cursor:pointer;color:#fff;background:#fff url(images/slide-title-active-1.jpg) 0 0 no-repeat}
#accordion-1 dt.hover{color:#68889b;}
#accordion-1 dt.active.hover{color:#fff}
#accordion-1 dd{padding:25px;background:url(images/slide.jpg) bottom left repeat-x;border:1px solid #dbe9ea;border-left:0;margin-right:3px}
#accordion-1 .slide-number{color:#68889b;left:10px;font-weight:bold}
#accordion-1 .active .slide-number{color:#fff;}
#accordion-1 a{color:#68889b}
#accordion-1 dd img{float:right;margin:0 0 0 30px;}
#accordion-1 h2{font-size:2.5em;margin-top:10px}
#accordion-1 .more{padding-top:10px;display:block}

Acerca del Autor:

Martín Iglesias, diseño web freelance de A Coruña, especializado en maquetación css y desarrollo de páginas web a medida con más de 18 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!