jQuery Plugin: simpleAccordion

17/Sep/2008 71

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. Javierexesk [#]

    what is tinder , tindr
    tinder login

  2. Richardlah [#]

    order original cialis online generic cialis daily pricing – cost of tadalafil without insurance
    can i buy cialis online

  3. Vitiuq [#]

    ivermectin ebay – ivermectin 8000 mcg ivermectin cost in usa

  4. Richardlah [#]

    cialis online without prescription ed pills – cialis 20 mg cost
    cialis 20 mg cost

  5. Richardlah [#]

    cialis without prescriptions canada erectile dysfunction medications – buy cialis cheap canada
    buy cialis tadalafil uk

  6. Fkmmfv [#]

    stromectol ivermectin tablets – ivermectin usa price ivermectin tablet price

  7. Richardlah [#]

    order original cialis online original cialis low price – canada cialis online
    find cheap cialis online

  8. Divhvz [#]

    ivermectin 4000 – stromectol ireland stromectol without prescription

  9. RenaldoLiz [#]

    viagra without a doctor prescription usa real viagra without a doctor prescription – viagra without a doctor prescription usa
    online viagra

  10. Kgguum [#]

    ivermectin india – ivermectin purchase ivermectin 500mg

  11. RenaldoLiz [#]

    buy viagra online without a prescription cialis vs viagra – viagra without doctor prescription
    viagra without prescription

  12. RenaldoLiz [#]

    viagra samples order viagra online – generic viagra without a doctor prescription
    100mg viagra without a doctor prescription

  13. Javierexesk [#]

    what is tinder , tider
    http://tinderentrar.com/

  14. Dklfis [#]

    plavix pharmacy – plavix 50 mg plavix from canada

  15. RenaldoLiz [#]

    viagra for women viagra for sale – buy viagra online without a prescription
    ed pills that work better than viagra

  16. Mhayhh [#]

    plavix 75 mg cost – plavix buy online uk plavix clopidogrel bisulfate

  17. Michaelerura [#]

    buy cialis online cheap: cheapest generic cialis australia where can i buy cialis without a prescription
    buy cialis 36 hour

  18. Michaelerura [#]

    buy cialis insurance: can i buy cialis online buy cialis 36 hour
    fastest delivery of generic cialis

  19. Uurokr [#]

    what are the best over the counter ed pills – erectile dysfunction medication insurance coverage reasons for ed

  20. Rxivcq [#]

    can you take ed pills while drinking – erectile dysfunction medication with cbd oil for sale pills for ed

  21. Michaelerura [#]

    find cheap cialis online: buy cialis tadalafil uk buy cialis united kingdom
    buy cialis online europe

Deja tu Comentario

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

CSSLab