Prototype Toggle through Array Only Toggling Last Item

I'm a beginner and my brother has showed me some prototype. All the weeks successfully tog开发者_JAVA百科gle the last week in the array but no other. Please let me know if I need to be more specific! Thanks!

<%= @athletic_program.program_name %>
<br>
<br>

<% array of_ids = Array.new %>

<% @program_weeks.each do |program_week| %>
  <% array_of_ids.push(program_week.id) %>
  <div id="week_number_<%= program_week.id %>" class="week_number">Week <%=program_week.week_number %></div>
<div id="program_week_form_<%= program_week.id %>" class="program_week_form">
    <% form_for(program_week) do |f| %>
      <%= f.error_messages %>
      Number of Workouts <%= f.select :number_of_workouts, (1..7), {} %>
      <%= f.submit 'Next' %>
    <% end %>
  </div>
<% end %>

<% content_for :javascript do %>
<script type="text/javascript">
function showForms(array_of_ids){
  for(var i=0;i<array_of_ids.length;i++){
    id = array_of_ids[i];
    week_id = "week_number_" + array_of_ids[i];
    $(week_id).onclick = function(event){
      program_form = "program_week_form_" + id;
      form_div = $(program_form);
      if (form_div.style.display == 'none'){
        form_div.style.display = 'block';
      } else {
        form_div.style.display = 'none';
      }
    }
  }
}

showForms(<%= array_of_ids.to_json %>);
</script>
<% end %>

The following now works!

<%= @athletic_program.program_name %>
<br>
<br>

<% @program_weeks.each do |program_week| %>
  <div id="week_number_<%= program_week.id %>" class="week_number" onclick="$('program_week_form_<%= program_week.id %>').toggle()">Week <%=program_week.week_number %></div>
  <div id="program_week_form_<%= program_week.id %>" class="program_week_form" style="display:none;">
    <% form_for(program_week) do |f| %>
      <%= f.error_messages %>
      Number of Workouts <%= f.select :number_of_workouts, (1..7), {} %>
      <%= f.submit 'Next' %>
    <% end %>
  </div>
<% end %>

I added style="display:none;" to the program_week_form_ to have it hidden by default.

Are you simply trying to toggle the form when the week div is clicked? In that case you are really going about this the wrong way.

I think you can remove all your javascript and your array_of_ids and just change the week div to this if you're using Prototype:

<div id="week_number_<%= program_week.id %>" class="week_number" onclick="$('program_week_form_<%= program_week.id %>').toggle()">Week <%=program_week.week_number %></div>