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+