# BlindDown Effect - starting with hidden div

**URL:** <https://www.ruby-forum.com/t/blinddown-effect-starting-with-hidden-div/48534>\
**Category:** Rails\
**Created:** [November 21, 2005, 11:33pm UTC](https://www.ruby-forum.com/t/blinddown-effect-starting-with-hidden-div/48534 "2005-11-21T23:33:21Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![n1c](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/n/3ec8ea/32.png) [@n1c](https://www.ruby-forum.com/u/n1c)\
**Post date:** [November 21, 2005, 11:33pm UTC](https://www.ruby-forum.com/t/blinddown-effect-starting-with-hidden-div/48534/1 "2005-11-21T23:33:21Z")

</div>

I would like to reveal a hidden div when the user clicks a link, using  
the Effect.BlindDown scriptaculous method.

How do I arrange it so that the div starts off hidden, but reveals  
itself with a BlindDown when the user clicks a link?

Currently the link is:  
add  
company

and the div css is:

#addcompany {  
position:absolute;  
background-color: #3f3;  
overflow:hidden;  
top: 180px;  
left: 280px;  
height: 100px;  
width: 200px;  
}

---

<div class="post-metadata">

**Author:** ![n1c](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/n/3ec8ea/32.png) [@n1c](https://www.ruby-forum.com/u/n1c)\
**Post date:** [November 21, 2005, 11:51pm UTC](https://www.ruby-forum.com/t/blinddown-effect-starting-with-hidden-div/48534/2 "2005-11-21T23:51:53Z")

</div>

set the property display: hidden;

I also dont think you need the return false in there , but i could be  
wrong.

adam

---

<div class="post-metadata">

**Author:** ![n1c](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/n/3ec8ea/32.png) [@n1c](https://www.ruby-forum.com/u/n1c)\
**Post date:** [November 22, 2005, 12:01am UTC](https://www.ruby-forum.com/t/blinddown-effect-starting-with-hidden-div/48534/3 "2005-11-22T00:01:47Z")

</div>

Many thanks for the reply, Adam.

I’ve tried with display:hidden, display:none and visibility:hidden;

display:hidden; makes no difference.  
display:none; and visibility:hidden; both hide the div to begin with,  
but it is not revealed when the DropDown function is called - it stays  
hidden.

Any ideas?

---

<div class="post-metadata">

**Author:** ![n1c](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/n/3ec8ea/32.png) [@n1c](https://www.ruby-forum.com/u/n1c)\
**Post date:** [November 22, 2005, 12:07am UTC](https://www.ruby-forum.com/t/blinddown-effect-starting-with-hidden-div/48534/4 "2005-11-22T00:07:58Z")

</div>

It’s display:none  
(There’s no display:hidden - only visibility:hidden)

Also someone correct me if I’m wrong but I think blind-down and blind-  
up both need an additional inner div with a fixed height.

# Quack!

\<%= link\_to ‘Mooh?’, ‘#’, :onclick =\> visual\_effect  
(:blind\_down, :mydiv) %\>

So sweet… Too bad Rails isn’t a girl… Meh… The real one’s are good  
at blinding up though

Rob

---

<div class="post-metadata">

**Author:** ![n1c](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/n/3ec8ea/32.png) [@n1c](https://www.ruby-forum.com/u/n1c)\
**Post date:** [November 22, 2005, 12:07am UTC](https://www.ruby-forum.com/t/blinddown-effect-starting-with-hidden-div/48534/5 "2005-11-22T00:07:58Z")

</div>

On Nov 21, 2005, at 4:03 PM, Robert wrote:

> It’s display:none  
> (There’s no display:hidden - only visibility:hidden)
> 
> Also someone correct me if I’m wrong but I think blind-down and  
> blind-up both need an additional inner div with a fixed height.

The additional inner div is unnecessary, although there may be some  
cases that need it (not sure).

The trick is to put the “display: none” in the style attribute of the  
tag, and NOT in the CSS class for the div.

- Jamis

---

<div class="post-metadata">

**Author:** ![n1c](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/n/3ec8ea/32.png) [@n1c](https://www.ruby-forum.com/u/n1c)\
**Post date:** [November 22, 2005, 12:15am UTC](https://www.ruby-forum.com/t/blinddown-effect-starting-with-hidden-div/48534/6 "2005-11-22T00:15:23Z")

</div>

> The trick is to put the “display: none” in the style attribute of the  
> tag, and NOT in the CSS class for the div.
> 
> - Jamis

Rock and roll! Works nicely now, thanks Jamis.

Many thanks indeed to everyone for their help. I think I’ll amend the  
scritpaculous wiki to include this hint and stop future sorry souls  
going nuts over it.