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!

2 comentarios
  1. Nicolás
    Nicolás Dice:

    Hola! muchísimas gracias! estaba buscando como hacer esto, y sobre todo entenderlo ya que recién estoy comenzando con Jquery. Me surge una consulta, lo apliqué y el contenido dentro de los “subaccordion” mantiene una altura fija, sin hacer auto fit y presentando unas barras de desplazamiento dentro. Probé modificar los auto height que vi, pero nada. Me fijé inspeccionando el elemento y me di cuenta que automaticamente se setea esto en cada content del subaccordion:

    elemento {
    display: block;
    height: 0px;
    }
    Si elimino ese height, soluciono el problema, la pregunta es que no sé de dónde lo trae jaja. Si me podés ayudar, gracias x 2!!

    Responder

¿Me dejas un comentario? ¡Gracias!

Deja un comentario

Los campos obligatorios están marcados con *