Un acordeón anidado con JQuery UI

En una GUI (Graphic User Interface), un acordeón (accordion) es una lista de elementos apilados verticalmente donde cada uno de ellos puede ampliarse para ver su contenido asociado. El advenimiento de la Web 2.0 ha popularizado el uso de este control o widget, que, ciertamente en mi opinión, da un look más cool a todo website que lo incorpore adecuadamente.

Acordeón

Puedes ver algunos ejemplos de acordeón en la documentación oficial de JQuery UI, pinchando aquí, o también en la web de codecanyon, donde siempre podrás adquirir todo tipo de widgets por muy poquitos dólares.

El artículo de hoy tiene como objetivo agilizar tu tiempo de desarrollo. Resuelve el problema de la anidación de acordeones desde la perspectiva JQuery UI para que puedas hacer fácilmente un copy&paste del código que pongo a continuación. Supongo que tienes unos conocimientos básicos de JQuery, JQuery UI y HTML. Dicho esto, ¡vámonos al turrón!

El HTML para los acordeones anidados (nested accordions) JQuery es éste:

El JavaScript que maquilla dinámicamente el HTML anterior es el siguiente:

Y ya está. ¿Esperabas algo más? 😉 Espero que puedas incorporar muy rápidamente este sistema de navegación a tu website. ¡Hasta otra!