jQuery Plugin: simpleAccordion

17/sep/2008 6

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+

Comentarios

  1. Rodrigo [#]

    Elemento activo
    Elemento colapsable
    </dl

    ???

  2. Rodrigo [#]

    [code]

    Elemento activo
    Elemento colapsable

    [/code]

    PD: hace falta un pequeño editor para los comentarios para poder ponde código 😛 no me se los tags de memoria.

  3. Coto [#]

    Bueeena man, sigue así…. uno de estos días, luego hacemos sociedad y mandas a ese piche argentino chanta.

  4. daTO [#]

    Hola,

    Felicidades por el trabajo, el plugin es bueno y ligero.

    He encontrado un pequeño salto en Firefox 3 cuando se utilizan imágenes en la zona collapsable.

    En IE7 se ve perfectamente el desplazamiento.

    Saludos. Buen trabajo.

  5. daTO [#]

    Por cierto, acabo de arreglarlo (al menos en al caso en que lo estoy usando):

    Como, al deslizarse, bajaba más de la altura del dd y luegoi la recuperaba, he dado una altura fija al dd y overrflow:hidden.

    Ahora ya no se ve el salto en firefox 3.

    Un saludo de nuevo

  6. fearlex [#]

    Muy bueno, LOL, ya trabajas en Jquery super que bien, me acuerdo cuando apenas empezabas con Mootools 😀

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab