Accordion de jQueryUI

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.

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();
});

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.