jQuery Plugin: simpleAccordion

17/Sep/2008 247

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

    gay college dating
    gay asian men dating white men
    largest gay dating site

  2. Eeuntf [#]

    generic cialis drugstore – cialis super active online on line cialis

  3. Sjrpql [#]

    generic cialis 2018 – cialis coupon cvs female cialis online

  4. keto zone diet pdf [#]

    keto food delivery https://ketorecipesnew.com/

  5. Xfvafk [#]

    stromectol 6 mg – ivermectin 3mg pill ivermectin tablet 1mg

  6. Lzizqv [#]

    ivermectin 5 mg price – stromectol order stromectol tablets 3 mg

  7. hogwarts a mystery dating gay [#]

    gay dating online south africa https://gaydatingzz.com/

  8. KevinWet [#]

    atl gay dating
    free female gay dating site
    black gay online dating

  9. Fhzrth [#]

    hollywood casino online – slot games online casino real money paypal

  10. Gbripq [#]

    online casino with free signup bonus real money usa – best casino online free slots online

  11. gay nerds dating [#]

    tips for online dating gay https://freegaychatnew.com/

  12. perks of dating a gay sissy [#]

    gay dating games steam https://gaychatus.com/

  13. KevinWet [#]

    fat men dating gay
    gay adult dating sims
    rich gay dating

  14. Ctaafu [#]

    erectile dysfunction cure – for him ed pills erectile dysfunction treatment options

  15. Aotraz [#]

    top rated ed pills – the blue pill ed medication for ed dysfunction

  16. Mxykvp [#]

    prednisone 10 mg order online – prices for 5mg prednisone 5 mg prednisone tablets

  17. KevinWet [#]

    logo gay dating show
    gay dating planet
    gay chubs dating site

  18. Mfzcrx [#]

    generic viagra india 100mg – viagra for sale in united states where to buy viagra online in usa

  19. web hosting or [#]

    I’m not certain the place you’re getting your info, however good topic.
    I needs to spend some time learning much more or understanding
    more. Thank you for wonderful info I was looking for this
    info for my mission.

  20. with web hosting [#]

    Hello, i believe that i saw you visited my website thus i
    got here to go back the favor?.I’m attempting to in finding things to enhance my website!I guess its good
    enough to use a few of your ideas!!

  21. t.co [#]

    Attractive component to content. I just stumbled upon your website
    and in accession capital to claim that I acquire actually loved account your weblog posts.
    Anyway I will be subscribing in your augment or even I success you get admission to consistently rapidly.

  22. bitly.com [#]

    WOW just what I was looking for. Came here by searching for it

  23. gay only web dating sites [#]

    arab gay dating https://gayonlinedating.net/

  24. gay bear dating free [#]

    texting rules gay dating https://gaydatingcanada.com/

  25. app.gumroad.com [#]

    I was curious if you ever considered changing the page
    layout of your website? Its very well written; I love what youve got to say.
    But maybe you could a little more in the way of content so people could connect with it
    better. Youve got an awful lot of text for only having one or 2
    pictures. Maybe you could space it out better? asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr

  26. HenryUnfiP [#]

    new to gay dating
    dating gay singles
    gay teen dating services

  27. ivermectin1.com [#]

    ivermectin 2mg jQuery Plugin: simpleAccordion | CSSLab | Laboratorio de ideas web http://ivermectin1.com/ stromectol

  28. sgh id gay dating [#]

    gay dating websites for teens https://gayedating.com/

  29. stromectol 3mg tablets scabies [#]

    stromectol medicine jQuery Plugin: simpleAccordion | CSSLab | Laboratorio de ideas web http://ivermectin1.com/ ivermectin tablets

  30. tinyurl.com [#]

    Hi there, just wanted to tell you, I liked this article.

    It was funny. Keep on posting! cheap flights http://1704milesapart.tumblr.com/ cheap flights

  31. quest bars are [#]

    Oh my goodness! Awesome article dude! Thank you, However I am encountering difficulties with your RSS.
    I don’t understand why I cannot subscribe to it.

    Is there anybody getting identical RSS issues? Anyone that knows the solution will you kindly respond?
    Thanks!! quest bars http://j.mp/3C2tkMR quest bars

  32. j.mp [#]

    It’s the best time to make some plans for the future and it
    is time to be happy. I’ve read this post and if I could I desire to suggest you few interesting things or advice.
    Maybe you could write next articles referring to
    this article. I desire to read more things about it!
    scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery

  33. j.mp [#]

    Your mode of explaining the whole thing in this article
    is truly fastidious, every one be capable of effortlessly be
    aware of it, Thanks a lot. ps4 games https://j.mp/3nkdKIi ps4 games

  34. coub.com [#]

    Good way of explaining, and good article to obtain information concerning my presentation subject,
    which i am going to deliver in college. scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery

  35. Mobile recharge [#]

    What a beautiful blog

  36. http://www.iherb.com/search?kw=questbars [#]

    Awesome article. quest bars https://www.iherb.com/search?kw=quest%20bars quest bars

  37. HenryUnfiP [#]

    interacial gay dating
    gay dating after 40
    short gay dating

  38. prednisoloneonline [#]

    steroid prednisone https://prednisoloneprednisolone.com/

  39. cetirizine 5 mg tablets [#]

    walgreens version of zyrtec – https://allergyd.com

  40. provigilonline [#]

    provigil medication provigil online

  41. bactrim drug class [#]

    co trimoxazole dosage trimoxazole infections

  42. nutrex [#]

    zyrtec for dogs – https://allergyd.com

  43. ivermectin over the counter [#]

    Global Message Here this by-product
    https://ivermectinsts.com ivermectin for humans
    https://stromectolivermect.com stromectol ivermectin
    https://stromectolivermect.com stromectol ivermectin
    https://ivermectinsts.com ivermectin for humans stromectol
    https://ivermectinstrom.com how to buy ivermectin

  44. stromectolforte.com [#]

    buy liquid ivermectin http://stromectolforte.com/ ivermectin where can i find ivermectin for humans

  45. generic ivermectin for humans [#]

    stromectol https://stromectolforte.com/# stromectol for humans order ivermectin

  46. accutane before and after [#]

    how does accutane work what is accutane

  47. bactrim generic name [#]

    https://bactrimsulfamethoxazole.com/ bactrim side effects

CSSLab