Un script muy pequeño para crear acordeones

Animated JavaScript Accordion es un script desarrollado por leigeber y es, probablemente, uno de los métodos más livianos y flexibles que existen para generar acordeones, es decir secciones que podemos expandir y colapasar con algún tipo de animación.

Sólo tiene 25 líneas de código y además, no requiere de ningún tipo de libreria auxiliar por lo que puede usarse en cualquier sitio web sin restricciones.

A decir verdad, es un proyecto "viejo" que ya tiene una nueva versión, bastante liviana pero más sofisticada, sin embargo, me sigue pareciendo que el original, sigue siendo el más útil, salvo casos muy especiales.

Para usarlo, debemos agregar el script en la plantilla y eso, lo hacemos directamente; copiando y pegando el código antes de </head>:

<script type='text/javascript'>
//<![CDATA[
var accordion=function(){
var tm=sp=10;
function slider(n){this.nm=n; this.arr=[]}
slider.prototype.init=function(t,c,k){
var a,h,s,l,i; a=document.getElementById(t); this.sl=k?k:'';
h=a.getElementsByTagName('dt'); s=a.getElementsByTagName('dd'); this.l=h.length;
for(i=0;i<this.l;i++){var d=h[i]; this.arr[i]=d; d.onclick=new Function(this.nm+'.pro(this)'); if(c==i){d.className=this.sl}}
l=s.length;
for(i=0;i<l;i++){var d=s[i]; d.mh=d.offsetHeight; if(c!=i){d.style.height=0; d.style.display='none'}}
}
slider.prototype.pro=function(d){
for(var i=0;i<this.l;i++){
var h=this.arr[i], s=h.nextSibling; s=s.nodeType!=1?s.nextSibling:s; clearInterval(s.tm);
if(h==d&&s.style.display=='none'){s.style.display=''; su(s,1); h.className=this.sl}
else if(s.style.display==''){su(s,-1); h.className=''}
}
}
function su(c,f){c.tm=setInterval(function(){sl(c,f)},tm)}
function sl(c,f){
var h=c.offsetHeight, m=c.mh, d=f==1?m-h:h; c.style.height=h+(Math.ceil(d/sp)*f)+'px';
c.style.opacity=h/m; c.style.filter='alpha(opacity='+h*100/m+')';
if(f==1&&h>=m){clearInterval(c.tm)}else if(f!=1&&h==1){c.style.display='none'; clearInterval(c.tm)}
}
return{slider:slider}
}();
//]]>
</script>

Luego, el CSS que es totalmente configurable y que definimos para cada uno de los acordeones a usar ya que pueden agregarse un número indetermiando de ellos. Para este ejemplo, seria algo así:

<style type='text/css'>
#nombreExclusivo { /* es el DIV contenedor */
margin: 0 auto
width: 450px;
}
.accordion { /* propiedades generales de la lista */
color: #9AB;
font-family: Arial;
font-size: 14px;
margin: 0;
padding: 0;
width: 450px;
}
.accordion dt { /* es enlace/título que expande y contrae */
background-color: #456;
color: #DEF;
cursor: pointer;
font-size: 22px;
padding: 5px;
text-align: center;
width: 440px;
}
.accordion dt:hover { /* efecto hover sobre ese enlace */
background-color: #345;
}
.accordion dd { /* cada elemento oculto */
margin: 0;
overflow: hidden;
}
.accordion span {  /* el contenido  */
display: block;
margin: 0;
padding: 10px;
width: 430px;
}
</style>

Ahora, debemos crear los acordeones y eso lo hacemos con una lista especial, usando las etiquetas DL DT y DD:

<div id="nombreExclusivo">
<dl class="accordion" id="nombreInstancia">
<dt>titulo/enlace ejemplo 1</dt>
<dd> <span> ... el contendio del ejemplo 1 ... </span> </dd>
<dt>titulo/enlace ejemplo 2</dt>
<dd> <span> ... el contendio del ejemplo 1 ... </span> </dd>
<dt>titulo/enlace ejemplo 3</dt>
<dd> <span> ... el contendio del ejemplo 1 ... </span> </dd>
</dl>
</div>

Hay dos IDs que son importantes:

nombreExclusivo es el del DIV contenedor; si tenemos varios de estos acordeones, cada uno debe tener un nombre diferente
nombreInstancia es el de la etiqueta DL y será el que usemos para inicializar las funciones del script

Esto último, lo agregamos al final; por ejemplo, antes de </body>; en general, la sintaxis mínima es esta:

var miSlider=new accordion.slider('miSlider');
miSlider.init('miID');

Y podemos agregar dos parámetros adicionales:

var otroSlider=new accordion.slider('otroSlider');
otroSlider.init('otroID',0,'nombreClase');

El valor 0, en este caso, indica el panel que queremos que se muestre abierto por defecto y es el número de orden (comenzando con 0); si no ponemos nada, todos se ven cerrados; el segundo parametro opcional es el nombre de una clase que establecerá als propiedades del título/enlace de ese panel abierto.