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 (

). 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][1] esté cargado: 
    $(document).ready(function(){<br />
     $(’#id_elemento’).simpleAccordion();<br />
});
Algunos par&aacute;metros:

  * **header**: "_selector_" (cualquier **etiqueta**, **class** o id que activar&aacute; el evento; **<dt>** es por defecto)
  * **collapsable**: "_selector_" (igual que el anterior; **<dd>** es por defecto)
  * **speed**: _integral_ (un n&uacute;mero en _milisegundos_ &oacute; las velocidades "**slow**", "**normal**" &oacute; "**fast**"; **fast** es por defecto)
  1. Tu código debe ser algo como esto: 
    <dl id=“id_elemento”><br />
     <dt>Elemento activo</dl><br />
     <dd>Elemento colapsable</dd><br />
</dl>
&oacute; para esto:

<pre class="language-markup"><code>&lt;ul id="id_elemento_2"&gt;&lt;br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class="cabeza"&gt;Elemento activo&lt;/li&gt;&lt;br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;li class="colapsable"&gt;Element collapsable&lt;/li&gt;&lt;br />
&lt;/ul&gt;</code></pre>

<pre class="language-javascript"><code>$(document).ready(function(){&lt;br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#id_elemento_2').simpleAccordion({&lt;br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;header: ".cabeza",&lt;br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;collapsable: ".colapsable",&lt;br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;speed: 200&lt;br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});&lt;br />
});</code></pre>
  1. Tómate una cerveza helada, ya estás listo.

[Ver ejemplo][2]{.verejemplo}

[Bajar jQuery simpleAccordion plugin v0.9][3]{.bajar} (.zip 24kb total con ejemplo)⌗

 

Requerimiento:⌗

  • jQuery 1.2+

[1]: http://www.csslab.cl/2008/04/07/iniciandose-en-el-dom/ “Enlace en CSSLab a “Iniciándose en el DOM”” [2]: http://www.csslab.cl/ejemplos/JQuery_Accordion/accordion.html “Enlace en CSSLab.cl a “Ver Ejemplo”” [3]: http://www.csslab.cl/ejemplos/JQuery_Accordion/JQuery_Accordion_v0.9.zip “Enlace en CSSLab.cl a “Bajar jQuery simpleAccordion Plugin””