How set an initial state for Slide effects

Question

Hi everyone, I would like to use the slide effect like the
collapsable panels, with an initial state "closed".
I used Spry Pre-Release 1.5 Preview
In my first attempt
<a
onclick="Spry.Effect.Slide('MoreOptionSlide',{duration:1000,from:'0%',
to:'100%',toggle:true})" >More Options</a>
The DIV is always "open" and after click it closes and
performes the slide animation.
Also i tried to change some style attributes of the DIV and
restore or change them in the "setup" function of the
spy.Effect.Slide constructor, I thought this function is executed
before animation, but it is executed even without be triggered the
animation.
Thanks,
Richard

Answer 1

Hello Richard,
After you design the page and adjust the element dimensions
as if the element would be in page without the animation to show it
you'll have to set the 'display:none' CSS property on that element.
In this situation the element will remain in page but will simply
be invisible. Something like this:
<div id="MoreOptionSlide" style="width: 300px; height:
200px; border: 1px solid black; overflow: auto;display:none;">
</div>
Now using Spry 1.5 effects you can make this element appear
after the More Options link is clicked:
<a href="#" onclick="effect.start(); return false;"
>More Options</a>
<script type="text/javascript">
var effect = new
Spry.Effect.Slide('MoreOptionSlide',{duration:1000,from:'0%',
to:'100%',toggle:true});
</script>
Regards,
Cristian MARIN