Accordion-Togle de ArtViper

Ya pongo los "apellidos", porque con tanto Togle como llevamos explicando hay para hacerse un buen lío, je.
Es de los "acordeones" que más me gustan, por nada obstructivo, por efectos, por delimitar bien la zona que ya ha sido leída y la que queda por leer y porque no es nada complicado, al revés que muchos otros. Podéis ver un ejemplo muy elegante en la sidebar de la págins de ArtViper.

Si picáis en el "click +/-" de esta entrada, veréis mi demo (menos sofisticada, pero efectiva :) ).

Cómo se hace:

.- SCRIPTS:

Colocad, antes del cierre "head", lo siguiente:
<script src='http://.../mootools.js' type='text/javascript'/>

<script language='javascript' src='http://.../reflection.js' type='text/ecmascript'/>

Al final de vuestra plantilla, inmediatamente encima del cierre del body (y no lo coloquéis en ningún otro sitio, o no funcionará este accordion), poned el siguiente script:

<script language='javascript' type='text/javascript'>

window.onload=function(){



$$(&#39;#menu a&#39;).each(function(el) {

el.addEvent(&#39;mouseenter&#39;,function(){

myEffect = el.effect(&#39;margin-left&#39;, {duration: 100,transition: Fx.Transitions.linear, wait: true}).start(&#39;0&#39;,&#39;30&#39;);

})



el.addEvent(&#39;mouseleave&#39;,function(){

myEffect = el.effect(&#39;margin-left&#39;, {duration: 800,transition: Fx.Transitions.Bounce.easeOut, wait: true}).start(&#39;30&#39;,&#39;0&#39;);

})



})



myStretch = document.getElementsByClassName(&#39;toggler&#39;);

myStretcher = document.getElementsByClassName(&#39;accordion&#39;);





myStretcher.each(function(el){

el.style.display = &#39;&#39;;

});





var ac = new Fx.Accordion(myStretch,myStretcher,



{

onActive: function(tog){

tog.setStyle(&#39;color&#39;, &#39;#ACDA4E&#39;);



tog.setStyle(&#39;cursor&#39;, &#39;help&#39;);



},

onBackground: function(tog){



tog.setStyle(&#39;color&#39;, &#39;#141516&#39;);

tog.setStyle(&#39;background-color&#39;, &#39;transparent&#39;);

tog.setStyle(&#39;cursor&#39;, &#39;help&#39;);



},

alwaysHide: true,

start : &#39;all-closed&#39;,

opacity : true

});





var bod = document.body;

var width = $(bod).getCoordinates();

width = width[&#39;width&#39;];

width = (width - 582) / 2;

$(&#39;newsletter&#39;).setStyle(&#39;left&#39;,width +&quot;px&quot;);

$(&#39;newsletter&#39;).setStyle(&#39;position&#39;,&#39;absolute&#39;);



$(&#39;clickme&#39;).addEvent(&#39;click&#39;,function(){

height = $(&#39;bg_news&#39;).getStyle(&#39;height&#39;).toInt();



if(height == 0){



$(&#39;bg_news&#39;).effect(&#39;height&#39;, { duration: 800, wait:true, transition:Fx.Transitions.Bounce.easeOut }).chain(function(){

$(&#39;contents_newsletter&#39;).setStyle(&#39;display&#39;,&#39;block&#39;);

$(&#39;answer&#39;).setStyle(&#39;display&#39;,&#39;block&#39;);

}).start(&#39;0&#39;,&#39;130&#39;);

}else{

$(&#39;contents_newsletter&#39;).setStyle(&#39;display&#39;,&#39;none&#39;);

$(&#39;answer&#39;).setStyle(&#39;display&#39;,&#39;none&#39;);

$(&#39;bg_news&#39;).effect(&#39;height&#39;, { duration: 1000, wait:true, transition:Fx.Transitions.Bounce.easeOut }).start(&#39;130&#39;,&#39;0&#39;);

}

})



$(&#39;form1&#39;).addEvent(&#39;submit&#39;, function(e) {

new Event(e).stop();

var log = $(&#39;bg_news&#39;).addClass(&#39;ajax_loading&#39;);

new Ajax(&#39;check.php&#39;, {

method: &#39;post&#39;,

update: &#39;answer&#39;,

data: this,

evalScripts:true,

onComplete: function() {

log.removeClass(&#39;ajax_loading&#39;);

}

}).request();

});



$$(&#39;.ex&#39;).each(function(el){

rel = el.getAttribute(&#39;title&#39;);

img = new Element(&#39;img&#39;);

img.src = rel;

el.setAttribute(&#39;rev&#39;,el.innerHTML);

el.setStyle(&#39;background-image&#39;,&#39;none&#39;);

el.setStyle(&#39;padding-left&#39;,&#39;0px&#39;);

el.innerHTML = &#39;&#39;;

img.setAttribute(&#39;alt&#39;,el.innerHTML);

img.injectInside(el);

})





}

</script>

Aquí dentro podéis arreglar a vuestro gusto el estilo del togle "activo" e "inactivo": fondo, texto, etc...

.- HTML (casi se me olvida...): en mi demo, sigue esta línea:

<div class='toggler'><span style='padding-left:10px'>Texto que quieres mostrar.</span></div>

<li class='accordion'>Texto que quieres esconder</li>

Creo que no se me olvida nada más...

Pd: Por cierto... ¿alguien más que yo ha notado que la "vista previa" desde la plantilla no funciona nada bien... :( ?