En primer lugar, pedir perdón por estar solicitando ayuda sobre una versión anterior de mootools, pero hasta que Joomla no se actualice a la versión 1.6, todo el CMS corre con Mootools 1.11.
Estoy teniendo problemas a la hora de ejecutar un script extraído de una de las demos de la página oficial de mootools, aunque es bastante lógico porque no tengo mucha idea de mootools, y soy bastante nuevo en el tema frameworks. El script es este:
Código:
window.addEvent('domready', function()
{
var mySlide = new Fx.Slide('test');
/*mySlide.hide();*/
$('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
Código:
#test {
background: #222;
color: #fff;
padding: 10px;
margin: 20px;
border: 10px solid pink;
}
Código:
<a id="toggle" href="#">Click</a>
<div id="test" class="test">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
1) El primer problema que tengo es que, lo que busco es que el div al cargarse la página este oculto y solo se abra cuando el usuario haga click en el enlace. En principio con activar la función hide() estaría resuelto, pero el problema es que cuando lo hago, lo contenido dentro del div desaparece totalmente, sin embargo el div si realiza el movimiento de slide al hacer click en el enlace, raro, no?
2) Y el segundo más que un problema es algo que quiero modificar, y en lo que llevo dando vueltas casi dos días. Ya he probado no menos de 30-40 post, y he revisado todas las demos de la web oficial en busca de luz, pero no doy con la solución.
Lo que busco es poder esconder y mostrar distintos divs, todos ellos con el mismo id="test" y clase="test", pero no doy con ello, estoy desesperado, y hoy casi me pongo a llorar como los niños pequeños de la rabia que me esta dando no dar con la clave.
Se que la cosa podría andar por utilizar algo como esto:
Código:
var togglers = $$('#test');
togglers.each(function(element) {..etc....
y asignar todo el script a cada elemento del array, pero no doy con ello.
Por favor, hay alguna alma caritativa que me pueda ayudar a resolver los dos misterios. El segundo misterio: como asignar el slide a varios divs va camino de convertirse en uno de los misterios de Fátima, he podido leer un montón de post de gente buscando la solución, tanto en inglés como en castellano, y en ninguno de ellos nadie encuentra la respuesta, espero que yo en este foro y en Español, mi idioma, tenga más suerte!!
Muchísimas Gracias por adelantado!
Alberto.