Como crear un Acordeón con HTML, CSS3 y JQuery


El Acordeón en GUI (Graphical User Interface) o Interface de Usuario como muchos ya saben no es nada más que una lista expansible con estilo por darle un adjetivo. Lista que está constituida por elementos que pueden ser desde texto hasta thumbnails. Esta lista expansible como bien dice su nombre se expande o encoge según un evento disparado por el usuario, ya sea un click sobre el mismo o el solo movimiento del puntero del mouse por encima. Dependiendo del rol que cumpla en nuestra aplicación pueden existir n elementos expandidos a la vez o solo uno, encogiendo los restantes al detectar una nueva expansión.

¿Cual podría ser el propósito? Quizás enlazar secciones, informaciones o ventanas de nuestra aplicación que posean algún tipo de relación entre ellas o reducir la cantidad de información que se muestre al usuario, desplegando solo una sección a la vez a petición del mismo.

Existen varios frameworks javascript GUI que implementan como parte de su suite de componentes el acordeón. Entre los más reconocidos tenemos a el acordeón de jQuery UI o el de Bootstrap ambas librerías líderes hoy en día.

Y sí, son muy buenos y muy recomendable su uso (yo personalmente me decanto por Bootstrap) pero nunca está de más aprender como desarrollar nuestra propia lista expansible. ¿Ventajas? Si solo necesitáramos de un Acordeón no sería sensato cargar todo la librería GUI seleccionada y hacer uso de solamente un componente, esa podría ser una buena razón. Otra razón a tener en cuenta es que futuras mejoras o modificaciones son mucho más fáciles de mantener cuando el componente es desarrollado por ti mismo.

Saltemos al Código

Para la implementación solo necesitamos HTML5, Javascript y algunas pinceladas CSS las cuales pueden sentirse libres de mejorarlas a su antojo, juegue con ella hasta lograr el producto que necesita. Aunque más adelante pueden probar nuestro Demo y descargar las fuentes. A continuación les haré una breve explicación de algunas líneas que considero las más importantes.

El código HTML a continuación que debemos situar dentro del <body> de nuestra página muestra una lista descriptiva (description list <dl>) donde cada <dt> define el elemento y su <dd> asociado describe al elemento, digamos una descripción o subcategorías quizás dependiendo del sistema.

Lenguajes de Programación
Java, PHP, C++, Javascript, Cobol, C#, Python, Ruby, Scala, Ada

IDE’s

Eclipse, Aptana Studio, Sublime Text Editor, Netbeans

Navegadores

Chrome, Firefox, IE, Safari, Aptana, Maxton

Redes Sociales

Twitter, Facebook, Google+, Instagram, Flirk, MySpace

 

Como sabrán todo tipo de efectos en nuestro navegador es obra de Javascript, el lenguaje de cara al cliente que se encarga de dar dinamicidad al resultado previamente procesado que viene desde nuestros servidores, pues el Acordeón no esta exento a esta regla. Nuestro Acordeón describirá un efecto Show/Hide en los elementos del mismo. Solamente mostraremos un elemento a la vez. De todo esto se encarga una función Javascript, que si se fijan mas adelante utiliza jQuery por lo que debemos incluirla previamente en nuestra página. En cada elemento efectuamos el proceso Show/Hide que tanto conocemos. Sin mas explicación veamos que pasos debemos seguir.

Paso a Paso

Nuestro Acordeón contará con 3 archivos. El HTML que sera la vista, su hoja de estilo y por supuesto el script javascript que maneja los eventos y el efecto seleccionado.

  • acordeon.html
  • script.js
  • style.css

Paso 1: HTML

La vista principal sera visualizada desde el fichero principal acordeon.html. Pondremos la estructura basica de cualquier pagina HTML y al mismo tiempo en el encabezado enlazaremos de una vez los 3 recursos adiciones que necesitaremos. Nota como estamos cargando JQuery desde el CDN de Google y luego es que cargamos script.js donde estara colocado el código para hechar andar el acordeon.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/script.js"></script>

Paso 2: Contenido de la Lista Expandible

Creada la estructura basica de nuestra pagina HTML es hora de agregar lo que en realidad sera el acordeon. Para esto vamos a utilizar las etiquetas de lista descriptiva. El siguiente codigo muestra el contenido dentro de sus respectivas etiquetas que sera utilizado para crear el acordion. Recuerda que la idea es que modifiques a tu antojo el contenido y el estilo de el demo de manera que lo puedas usar en tus propios proyectos:

<dl>
   <dt>Lenguajes de Programación</dt>
   <dd>Java, PHP, C++, Javascript, Cobol, C#, Python, Ruby, Scala, Ada</dd>	
   <dt>IDE's</dt>
   <dd>Eclipse, Aptana Studio, Sublime Text Editor, Netbeans</dd>
   <dt>Navegadores</dt>
   <dd>Chrome, Firefox, IE, Safari, Aptana, Maxton</dd>
   <dt>Redes Sociales</dt>
   <dd>Twitter, Facebook, Google+, Instagram, Flirk, MySpace</dd>		
</dl>

Como vez en el codigo anterior colocamos toda la informacion dentro de etiquetas dl, utilizando dt para el encabezado y dd para la descripcion. Una vez que unimos todo el codigo con la estructura que habias creado anteriormente tu fichero acordeon.html debe contener el siguiente codigo:

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <script src="js/script.js"></script>
  <meta charset="utf-8">
  <title>Acordeon</title>
</head>
<body>
<dl>
   <dt>Lenguajes de Programación</dt>
   <dd>Java, PHP, C++, Javascript, Cobol, C#, Python, Ruby, Scala, Ada</dd>	
   <dt>IDE's</dt>
   <dd>Eclipse, Aptana Studio, Sublime Text Editor, Netbeans</dd>
   <dt>Navegadores</dt>
   <dd>Chrome, Firefox, IE, Safari, Aptana, Maxton</dd>
   <dt>Redes Sociales</dt>
   <dd>Twitter, Facebook, Google+, Instagram, Flirk, MySpace</dd>		
</dl>
</body>
</html>

 

Paso 3: Evento y Efecto

El efecto que se muestra en el demo es ejecutado una vez un evento es disparado. Como sabes esto solo se logra con javascript el cual nos ofrece el dinamismo necesario para darle vida a los componentes estaticos de HTML. El siguiente codigo es el encargado de dicho trabajo visual. Por supuesto antes creamos js/script.js el cual fue agregado en el head de nuestro acordeon.html. Importante como podran notar la utilizacion de la libreria jQuery por lo que no debemos olvidar agregarla.

$('document').ready( function(){	
	$('dt').on('mouseenter', function(){
		$(this)
			.next()
			.slideDown()
			.siblings('dd')
			.slideUp(500);
		});	
	});

Paso 4: Estilo

Un poco de CSS y terminamos. Usualmente es el toque final, una vez todo funcionando como queremos lo que queda es darle arte y forma. Una vez creado el fichero css/style.css le agregamos las siguientes lineas y nuestro navegador se encargara del resto por nosotros.

	body {

		text-align: center;
		margin: auto;
		padding-top: 10px;
		width: 50%;	
		background-color: lightsalmon;
	}

	dl {
		border: 2px solid black;
	}

	dt {
		background-color: lightgreen;
		padding: 10px;
		cursor: pointer;
		line-height: 1.8em;	
		font-weight: bolder;
		border-bottom: 1px solid lightgray;
		border-top: 1px solid white;
		font-size: 25px;

	}

	dd {
		background-color: lightgray;
		margin: 0;
		font-size: 15px;
		padding: 10px;
		font-family: 'Verdana';
	}

	dt:nth-last-child(2) {
	 	border-bottom: none;
	}

	dd:not(:first-of-type) {
		display: none;
	}

Como veráz obtenemos un hermoso acordeon el cuál podemos seguir modificando aún mas a nuestro antojo. Haz click en Ver Demo para ver el resultado, y en Código para copiar todo el codigo o hacer modificaciones.
Ver Demo Código

Espero que este sencillo Paso a Paso les haya sido de mucha ayuda. Esperen próximamente mas guias similares utilizando javascript y PHP.

Latest posts by Leroy Ley (see all)