Accordion de jQueryUI

  • Por
El plugin accordion de jQueryUI nos permite mostrar contenidos de una manera dinámica. Explicamos cómo utilizarlo.

A lo largo de varios artículos estamos explicando muchos de los componentes, también llamados "widgets", que jQueryUI dispone para los interesados en crear interfaces de usuario enriquecidas.

En este caso vamos a tratar un componente interesante, que seguro puede aportar mucho dinamismo a los contenidos de nuestra página web. Se trata del "Accordion", o acordeón en español, que permite mostrar diversos contenidos clasificados en secciones, de manera que se mantenga abierta una de esas secciones y se cierre automáticamente solo al abrir otra.

Nota: Si te interesa conocer jQueryUI desde el principio, recomendamos comenzar con la lectura del artículo Primeros pasos con jQuery UI.

Si conocemos un poco jQueryUI ya habremos podido experimentar lo sencillo que resulta, con el mínimo código, crear componentes de interfaces de usuario potentes y versátiles. El plugin Accordion no es una excepción, sino al contrario, resulta todavía más impresionante ver lo sencillo que es crear una interfaz muy atractiva con prácticamente nada de código.

Lo primero que podemos hacer es ver en este enlace cómo es un accordion y el código que hemos utilizado para generarlo:

$("#accordion").accordion();

Estructura HTML para generar los elementos del acordeón

Claro que esa línea de código es el Javascript necesario para iniciar el accordion, pero como te imaginarás, hará falta algo de HTML. Esta sería la estructura básica del HTML que utilizaríamos para generar las secciones del accordion.

<div id="accordion">
   <h3><a href="#">Sección 1</a></h3>
   <div>Contenido 1...</div>
   <h3><a href="#">Sección 2</a></h3>
   <div>Contenido 2...</div>
   <h3><a href="#">Sección n</a></h3>
   <div>Contenido n</div>
</div>

Como ves, es un código HTML de lo más normal. En principio, según señalan en la documentación, deben generarse los titulares de las secciones en encabezamientos H3, pero durante las pruebas hemos visto que el widget por defecto intenta hacer el acordeón incluso con otros encabezados que podamos poner. No obstante, si queremos utilizar otro encabezado para las secciones podemos indicarlo al llamar al plugin en las "options", como veremos más adelante en este artículo.

Luego, el contenido de cada sección se coloca en una capa DIV, que puede tener cualquier texto con etiquetas HTML diversas, imágenes, etc.

Invocar el plugin Accordion

Una vez tenemos nuestro HTML ya solo nos queda invocar el plugin Accordion de jQueryUI, que se hace con la línea de código que hemos visto antes. Claro que siempre debemos llamarlo cuando el navegador esté listo para recibir acciones y para ello utilizamos el conocido evento "ready" del "document".

$(document).ready(function() {
   $( "#accordion" ).accordion();
});
Nota: Por supuesto, tenemos que haber cargado previamente jQuery y jQueryUI, en una descarga que incluya el widget Accordion. Todo eso se explicó anteriormente.

Aquí podemos ver el acordeón generado con las opciones por defecto.

Opciones del plugin Accordion

El comportamiento que conseguimos con las opciones predeterminadas será suficiente en la mayoría de los casos, no obstante, existen algunas alternativas que podemos definir al invocar el componente. La lista completa la podemos ver en la documentación del Accordion de jQueryUI, aunque realmente no hay muchas que modifiquen de gran manera el acordeón.

Las opciones se expresan mediante un objeto de "options" que se pasa al invocar al plugin. Por ejemplo, aquí estaríamos llamando al accordion con tres opciones:

$( "#accordion" ).accordion({
   'header': 'h2',
   'fillSpace': true,
   'active': 1
});
  • 'header': 'h2 sirve para definir que se utilicen encabezados HTML de tipo H2 para los títulos de las secciones.
  • 'fillSpace': true sirve para que se ajuste a la altura del contenedor donde está colocado el acordeón, si es que ese contenedor tenía una altura definida.
  • 'active': 1 hace que se muestre activa la segunda sección del acordeón (la primera sería la sección 0, así que la 1 es la segunda).

Podemos ver un Accordion generado utilizando esas tres opciones.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Lupe

11/6/2014
accordion jquery
Excelente

Hugo

15/12/2014
Muy buen tutorial...
Muy bueno, pero tengo un problema al cargar los div dinamicamente, tengo el div contenedor "accordion" y dentro de ese agrego los otros segun el usuario, me carga los div pero no funciona el accordion, si puedes darme una ayuda, te lo agradeceria.