Easy Accordion jQuery plugin. Un acordión horizontal con Jquery Blog de Martin Iglesias .eu

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

Escrito por: Martín el 07-10-2010 17:58:38 y leído 8073 veces

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

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 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 JAVASCRIPT

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

Código 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}

Categorías: Jquery • Acordeón • Slider • •