Blind/slide effect- start closed

Hello All,

I was very encouraged by your previous entries, and hope that someone can shed light on my issue.

I am using the blind effect for opening and closing a portion of my web page, but I can not seem to control how this portion looks when you first open the page. To clarify further: When I load the page the portion is shown and upon clicking it, it then hides. I would like to create exactly the opposite effect. When I click it, it should show the portion.

I also tried this with the slide effect, and came across the same issue.

My current code:

First:
<!--
function MM_effectBlind(targetElement, duration, from, to, toggle)
{
Spry.Effect.DoBlind(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
//-->
</script>


Then:

<div id="slider" onclick="MM_effectBlind(this, 1000, '100%', '10%', false)">


Thank you for your help in advance!

P.S. As a bit more of a challenge, what I would really love to do is to apply this effect to a button in my navigation bar. I gave up on this idea, but if you can figure out how to make a portion of the page move up and down when they click this button I would greatly appreciate it!

see the Spry Blind sample page here:
blind_sample.html

  The target element can initially be hidden. To hide an element you can use one of two CSS properties: display and visibility. The difference between these two properties is the way it will alter the flow of the page. While using the display: none; the element is completelly removed from page and the other elements take its place on the page. The visibility: hidden will leave the element in the page flow but the element is simply not seen.

In the following sample we will use the visibility: none; to initially hide the element and using the Blind effect, the element will appear on the page.

<style type="text/css">
.animationContainer{
height: 220px;
}
.hideInitially{
visibility: hidden;
}
</style>
...
<form method="get" action="blinds_sample.html">
<input type="button" onclick="blind_hidden.start();" value="Blind Example Hidden" />
</form>

<div class="animationContainer">
<div class="hideInitially" id="slideItDown_hidden">
...
</div>
</div>

<script type="text/javascript">
var blind_hidden = new Spry.Effect.Blind("slideItDown_hidden", {duration: 2000, from: '0%', to: '100%', toggle: true});
</script>  

sorry but i take your code and put them in mysite
it appear error
that is
Error: 'Spry' is undefined

What is the solution to this problem??

Thanks

because your missing the spry librarys on your server example on the head should be something similiar to

<link href="../../css/samples.css" rel="stylesheet" type="text/css" />
<script src="../../includes/SpryEffects.js" type="text/javascript"></script>

problem is still existing

Error: 'blind_hidden' is undefined

please give me the complete code?

thanks

The spry sample page should have all you need:
blind_sample.html


If you zare having troubles, you should post in the Spry forums:
spry