CSSLab

jQuery Plugin: simpleAccordion

Un nuevo plugin para jQuery sale a la luz. Nuevamente, iluminado por una necesidad en un proyecto web, qué mejor que hacer las cosas a mi manera y al mismo tiempo aportar al mundo con algo que quizás le será útil a alguien más.

Un colega necesitaba hacer una sección de Preguntas Frecuentes (FAQ) y que las respuestas a las preguntas se desplegaran mediante el efecto de acordeón. Bastante simple, ¿no? Bueno, como sabrán le recomendé que lo más semántico era utilizar listas de definición (<dl>). Pero los plugins que encontraba eran muy grandes para lo poco que necesitaba (10kb+), y necesitaban además de otros plugins de jQuery para funcionar, como el Dimensions, lo que hacía que pesara aún más el total. Así que construí uno simple, customizado y parametrizable, y que finalmente pesa apenas 1kb.

Modo de Uso:

1. Incluye tu librería de jQuery favorita
2. Incluye el plugin jquery.simpleAccordion.js
3. Inicialízalo cuando el DOM esté cargado:

   $(document).ready(function(){
        $(‘#id_elemento’).simpleAccordion();
   });

   Algunos parámetros:

   • header: "selector" (cualquier etiqueta, class o id que activará el evento; <dt> es por defecto)
   • collapsable: "selector" (igual que el anterior; <dd> es por defecto)
   • speed: integral (un número en milisegundos ó las velocidades "slow", "normal" ó "fast"; fast es por defecto)
4. Tu código debe ser algo como esto:

   <dl id="id_elemento">
        <dt>Elemento activo</dl>
        <dd>Elemento colapsable</dd>
   </dl>

   ó para esto:

   <ul id="id_elemento_2">
        <li class="cabeza">Elemento activo</li>
        <li class="colapsable">Element collapsable</li>
   </ul>

   $(document).ready(function(){
        $(‘#id_elemento_2′).simpleAccordion({
             header: ".cabeza",
             collapsable: ".colapsable",
             speed: 200
        });
   });

5. Tómate una cerveza helada, ya estás listo.

Ver ejemplo

Bajar jQuery simpleAccordion plugin v0.9 (.zip 24kb total con ejemplo)

Requerimiento:

• jQuery 1.2+