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>:
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>:
//<![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í:
#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:
<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 hacemos al final; por ejemplo, antes de </body>:
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 hacemos al final; por ejemplo, antes de </body>:
var slider1=new accordion.slider(slider1,0,'open');
slider1.init("nombreInstancia"");
</script>
En general, la sintaxis mínima es esta:
miSlider.init('miID');
Y podemos agregar dos parámetros adicionales:
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.
TABLA - FUENTES - FONTS
Disculpen las Molestias
No hay comentarios:
Publicar un comentario