How do I show/hide multiple divs (not possible for each to have a unique ID) in a Rails app?

Question

I need to create a 'Reply' button that shows a form for any item in a feed. In other words, it can't be showing/hiding something with a unique div id, because it has to work for any of a (potentially) infinite number of items.

If I use code like this:

<% @questions.each do |question| %>
  <%= question.content %>
  <a href="" onclick="showStuff('reply'); return false;">Reply</a>
  <div id="reply">
    <% form_for @reply do |f| %>
      <%= f.text_field :message %>
      <%= f.submit "Add", :class => "button" %>
    <% end %>
  </div>
  <% end %>

then the form only opens for the first item in the feed.

I don't know Javascript at all and not much JQuery, but if someone wants to take me through this step-by-step, I'd really appreciate it. Thanks.

Answer 1

Use jquery, and use classes.

Answer 2

As you are generating multiple elements, you shouldn't give them an id, because each id should be unique.

Instead, locate the div by searching relative to the link that was clicked on.

<% @questions.each do |question| %> 
    <%= question.content %> 
    <a href="" onclick="showStuff(this); return false;">Reply</a> 
    <div> 
       <% form_for @reply do |f| %> 
           <%= f.text_field :message %> 
           <%= f.submit "Add", :class => "button" %> 
       <% end %> 
    </div> 
<% end %> 
.
.
.
function showStuff(link){
   $link).next().show();
}

Answer 3

I don't see why it isn't possible to give unique IDs. Just do something like this in your loop:

<div id="reply_<%= question.id %>">

Now all of your divs will have unique IDs. Furthermore, it is easy to know what div ID references which question because you know which questions (and corresponding IDs) you pulled from the database.