Question

I have a within a form that contains other fields for the form. I would like the User to be able to toggle whether they see it or not.

I would like them to be able to press a button/link which would make that div appears or disappear. Ideally I could have some simple javascript effect, such slide in or fade-in.

Here is my _form:

  1 <%= form_for @message do |f| %>
  2   <%= f.error_messages %>
  3   <p>
  4     <%= f.label :subject %><br />
  5     <%= f.text_field :subject %>
  6   </p>
  7   <p>
  8     <%= f.label :body %><br />
  9     <%= f.text_area :body %>
 10   </p>
 11   <p>
 12   <div id = "contact_form">
 13      <%= form_for @contact do |fc| %>
 14         <p>
 15           <%= fc.label :first_name %><br />
 16           <%= fc.text_field :first_name %>
 17         </p>
 18         <p>
 19           <%= fc.label :last_name %><br />
 20           <%= fc.text_field :last_name %>
 21         </p>
 22 
 23      <% end %>
 24   </div>
 25   </p>
 26   <p>

Answer 1

The easiest way to do this would be to use the .css rule of the jQuery javascript library:

http://api.jquery.com/css/
(See the example about a quarter down: To change the color of any paragraph to red on mouseover event.)

So using this you’d use this javascript on clicking the button/link:

$('div#contact_form').css('display', 'none');