# I feel stupid - help with Element.show

**URL:** <https://www.ruby-forum.com/t/i-feel-stupid-help-with-element-show/56543>\
**Category:** Rails\
**Created:** [April 1, 2006, 12:08am UTC](https://www.ruby-forum.com/t/i-feel-stupid-help-with-element-show/56543 "2006-04-01T00:08:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![pergesu](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/22d042/32.png) [@pergesu](https://www.ruby-forum.com/u/pergesu)\
**Post date:** [April 1, 2006, 12:08am UTC](https://www.ruby-forum.com/t/i-feel-stupid-help-with-element-show/56543/1 "2006-04-01T00:08:41Z")

</div>

This isn’t Rails-specific, and I’m sorry for that, but I haven’t been  
able to get a response in the #prototype/#javascript/#ror channels,  
nor find anything via Google.

I have a form element that I want to be hidden when the page first  
loads, and appear when a user clicks the link. Here’s the code:

\<%= link\_to 'Sign In', '#', :onclick =\> "Element.show('signin-form')" %\>

 \<%= start\_form\_tag(signin\_url)%\> \<%= text\_field\_tag :username %\> \<%= password\_field\_tag :password %\> \<%= submit\_tag 'Sign In' %\> \<%= end\_form\_tag %\>

In my CSS file I have  
#signin-form {  
display: none;  
}

Now checking out  
[http://wiki.script.aculo.us/scriptaculous/show/Element.show](http://wiki.script.aculo.us/scriptaculous/show/Element.show), I’m  
pretty sure that’s all I have to do. However if I click on the link,  
the form doesn’t get shown. No JS errors. If I have the element  
shown at the page start, I can hide/toggle it all I want. Just can’t  
start off with display:none apparently. I’m using Firefox 1.5.01 and  
the javascript files that were installed with “rake rails:update”.

Pat

---

<div class="post-metadata">

**Author:** ![pergesu](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/22d042/32.png) [@pergesu](https://www.ruby-forum.com/u/pergesu)\
**Post date:** [April 1, 2006, 1:07am UTC](https://www.ruby-forum.com/t/i-feel-stupid-help-with-element-show/56543/2 "2006-04-01T01:07:53Z")

</div>

Try it with the style embedded. i.e:

I’m not sure what difference that would make, but that’s what works for  
me.

---

<div class="post-metadata">

**Author:** ![pergesu](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/22d042/32.png) [@pergesu](https://www.ruby-forum.com/u/pergesu)\
**Post date:** [April 1, 2006, 1:09am UTC](https://www.ruby-forum.com/t/i-feel-stupid-help-with-element-show/56543/3 "2006-04-01T01:09:54Z")

</div>

If you set display: none in the CSS file, Javascript won’t realize it.  
You  
have to manually specify style=“display: none;” in the HTML.

---

<div class="post-metadata">

**Author:** ![pergesu](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/22d042/32.png) [@pergesu](https://www.ruby-forum.com/u/pergesu)\
**Post date:** [April 1, 2006, 1:18am UTC](https://www.ruby-forum.com/t/i-feel-stupid-help-with-element-show/56543/4 "2006-04-01T01:18:57Z")

</div>

Cool, that works, thanks for the help.

---

<div class="post-metadata">

**Author:** ![pergesu](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/p/22d042/32.png) [@pergesu](https://www.ruby-forum.com/u/pergesu)\
**Post date:** [April 1, 2006, 1:37am UTC](https://www.ruby-forum.com/t/i-feel-stupid-help-with-element-show/56543/5 "2006-04-01T01:37:06Z")

</div>

The difference is that “display:none” in external CSS overwrites  
the browsers default for the display attribute, which is (for most  
elements)  
either “block” or “inline”, whereas setting it on the “style”  
attribute you  
can fall back to the browsers default later (which is what  
Element.show does).

That’s a bit of an annoyance with the CSS spec, that it doesn’t seperate  
how an element should “flow” on the page from whether it should  
be displayed at all.

-Thomas

Am 01.04.2006 um 01:07 schrieb Adam B.: