> Manuales > Manual de jQueryUI

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

Podemos ver un Accordion generado utilizando esas tres opciones.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual