# Turn element hidden by default (ajax question)

**URL:** <https://www.ruby-forum.com/t/turn-element-hidden-by-default-ajax-question/98858>\
**Category:** Rails\
**Created:** [July 18, 2006, 5:50pm UTC](https://www.ruby-forum.com/t/turn-element-hidden-by-default-ajax-question/98858 "2006-07-18T17:50:55Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![johnnybutler7](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/8491ac/32.png) [@johnnybutler7](https://www.ruby-forum.com/u/johnnybutler7)\
**Post date:** [July 18, 2006, 5:50pm UTC](https://www.ruby-forum.com/t/turn-element-hidden-by-default-ajax-question/98858/1 "2006-07-18T17:50:55Z")

</div>

(this is my first post on the ruby forum. If this is not the right place  
for this type of question please let me know).

## Ajax question I have a checkbox that toggles the visibility of another element (a text field) with the code:

Appear! \<%= check\_box :object\_name, :method, :onClick =\> "Element.toggle('text\_field\_to\_toggle')" %\> \<%= text\_field :object\_name, :method, :disabled =\> 'true' %\>

--- the text field is: --- \<%= text\_field :object\_name, :text\_field\_to\_toggle %\> -- It works well, the only problem is that it HIDES the text field which is initialy visible. How can i make the the initial state of an element hidden so it can be toggled to visible. Is there a parameter on the text box element that can set the initial state hidden or it should be implemented in javascript? Thank you in advance.

---

<div class="post-metadata">

**Author:** ![johnnybutler7](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/8491ac/32.png) [@johnnybutler7](https://www.ruby-forum.com/u/johnnybutler7)\
**Post date:** [July 18, 2006, 7:14pm UTC](https://www.ruby-forum.com/t/turn-element-hidden-by-default-ajax-question/98858/2 "2006-07-18T19:14:01Z")

</div>

John Brown \<fanmih@…\> writes:

> “Element.toggle(‘text\_field\_to\_toggle’)” %\>  
> box element that can set the initial state hidden or it should be  
> implemented in javascript?  
> Thank you in advance.

I think that you just have to write your tag like this :  
\<%= text\_field :object\_name, :text\_field\_to\_toggle , :style =\> “display:  
none” %\>

The rule “display: none” must be inline and not in a separate css file  
if you  
want Element.toggle working properly.

–  
Frantz Gauthier

---

<div class="post-metadata">

**Author:** ![johnnybutler7](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/j/8491ac/32.png) [@johnnybutler7](https://www.ruby-forum.com/u/johnnybutler7)\
**Post date:** [July 18, 2006, 7:53pm UTC](https://www.ruby-forum.com/t/turn-element-hidden-by-default-ajax-question/98858/3 "2006-07-18T19:53:51Z")

</div>

Just a general piece of advice, using css to set the visibility to  
none is fine but bear in mind that if someone hasn’t got javascript  
enabled that element will never appear.

I’ve always found that using javascript to hide elements is better  
since that way you don’t obscure anything from people who have it  
turned off.

A function like the following will hide everything with a class name  
of ‘hideme’.

Event.observe(window, ‘load’,  
function() { allNodes = document.getElementsByClassName(“hideme”);  
for(i = 0; i \< allNodes.length; i++) {  
allNodes[i].style.display=“none”;  
} }  
);

If you don’t need to hide a whole class of items then target by ID for  
performance reasons.

Ross