Make mootools Fx.Slide close on load
If you havn't already, check out mootools to see the code used here.
I'm using the Fx.Slide tool, but I don't want it to open/expand until the user clicks on the link.
To do this, you must edit the javascript for Fx.Slide, and add some css for the elements.
Here is the javascript code that is provided on the site:
$('slidein').addEvent('click', function(e){
e = new Event(e);
mySlide.slideIn();
e.stop();
});
Note: you need to enclose this in a domready event. You can find this in the mootools documentation, or below:
Here is my edited code. Basically, what is happening here is I'm setting a style for toggle1 (name of the div to hold content) to set visibility to hidden and height to 0px (otherwise you'll be left with a big blank space)
visibility: hidden;
height:0px;
margin-left:15px;
}
The javascript then calls Fx.Slide('toggle1') when it is loaded, to close the div. Then, when the user clicks the link, it sets visibility to visible and height to auto.
var mySlide = new Fx.Slide('toggle1');
mySlide.toggle();
$('toggleSwitch1').addEvent('click', function(e){
e = new Event(e);
$('toggle1').setStyle('visibility', 'visible');
$('toggle1').setStyle('height', 'auto');
mySlide.toggle();
e.stop();
});
});
It's a hack, I know. But a good one :)
Simply write:
var mySlide = new Fx.Slide('test').hide();
Thats it.
This just re-iterates the fact that I need to read comments before jumping the gun on fixes. Thankyou John!
cold you please help ,
thnx
Replace 'slideIn' with 'slideOut'. That should do the trick. See the code on mootools.net, it has all the functions on there