각 루프의 부트 스트랩 붕괴

Question

난 루프의 루프로 작동하도록 부트 스트랩 축소 기능을 얻으려고합니다. 현재 루프의 첫 번째 항목 만 작동하지만 두 번째 항목을 클릭하면 첫 번째 항목이 축소됩니다. 아래는 제 코드입니다. 이 동적 인 것을 만드는 가장 좋은 방법은 무엇입니까?

<div class="accordion" id="accordion2"> 
    <div class="accordion-group"> 
    <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne"> 
     <h3><%= i.firstname %><%= i.lastname %></h3> 
     </a> 
    </div> 
    <div id="collapseOne" class="accordion-body collapse in"> 
     <div class="accordion-inner"> 
    <%= i.email %></br> 
     Payed: <%= i.payed? %></br> 
     Birthday: <%= i.dateofbirth %><br /> 
     Address: <%= i.address %><br /> 
     City: <%= i.city %><br /> 
     Province: <%= i.province %><br /> 
     Phone Number: <%= i.phonenumber %><br /> 
     Service Provider: <%= i.serviceprovider %><br /> 
     Gender: <%= i.gender %><br /> 
     Languages: <%= i.languages %><br /> 

     <h3>School Information</h3> 
     Highschool: <%= i.app.highschool %><br /> 
     Address: <%= i.app.highschool_address %><br /> 
     City: <%= i.app.highschool_city %><br /> 
     Province: <%= i.app.highschool_province %><br /> 
     Postal Code: <%= i.app.highschool_postalcode %><br /> 

     <h4>Post Secondary Schools of Interest</h4> 
     <% i.app.postsecondaries.each do |ps| %> 
     Post Secondary Name: <%= ps.postsecondary %><br /> 
     Address: <%= ps.postsecondary_address %><br /> 
     City: <%= ps.postsecondary_city %><br /> 
     Province: <%= ps.postsecondary_province %><br /> 
     Postal Code: <%= ps.postsecondary_postalcode %><br /> 
     Country: <%= ps.postsecondary_country %><br /> 
     Program: <%= ps.postsecondary_program %><br /> 
     Faculty: <%= ps.postsecondary_faculty %><br /> 
     Status: <%= ps.postsecondary_status %><br /> 
     <% end %> 
     </div> 


     <div class="span3 well"> 
     <h3>Grades</h3> 
     <% i.app.grades.each do |grade| %> 
     <br />Course: <%= grade.course %><br /> 
     Grade: <%= grade.course_grade %> 
     <% end %> 
     </div> 

     <div class="span3 well"> 

     <h3>Extracurricular Activities</h3> 
     <% i.app.extra_activities.each do |e| %> 
     Activity: <%= e.activity %><br /> 
     Position: <%= e.activity_position %><br /> 
     Dates: <%= e.activity_dates %><br /> 
     Times Per Week: <%= e.activity_timeperweek %><br /> 
     Contact Name: <%= e.activity_contact %><br /> 
     Contact Position: <%= e.activity_contact_position %><br /> 
     Contact Phone Number: <%= e.activity_contact_phonenumber %><br /> 
     Contact Email: <%= e.activity_contact_email %><br /> 
     Description: <%= e.activity_description %> 
     <% end %> 

     <h3>Essay 1</h3> 
     Describe the situation: <%= i.app.describe_situation %></br> 
     </br>Explain the actions you took in response to the situation: <%= i.app.explain_action %></br> 
     </br>Identify the good that resulted once the situation was resolved: <%= i.app.resolved_situation %></br> 
     </br>What personal strength or skill did you use that was key in determining the outcome?: <%= i.app.personal_skill %></br> 

     <h3>Essay 2</h3> 
     Describe the situation: <%= i.app.describe_situation_two %></br> 
     </br>Explain the actions you took in response to the situation: <%= i.app.explain_action_two %></br> 
     </br>Identify the good that resulted once the situation was resolved: <%= i.app.resolved_situation_two %></br> 
     </br>What personal strength or skill did you use that was key in determining the outcome?: <%= i.app.personal_skill_two %></br> 

     <h3>Essay 3</h3> 
     Describe the situation: <%= i.app.describe_situation_three %></br> 
     </br>Explain the actions you took in response to the situation: <%= i.app.explain_action_three %></br> 
     </br>Identify the good that resulted once the situation was resolved: <%= i.app.resolved_situation_three %></br> 
     </br>What personal strength or skill did you use that was key in determining the outcome?: <%= i.app.personal_skill_three %></br> 
     </div> 
     </div> 
    </div> 
    </div> 

    <% end %> 

Answer 1

나는 아코디언 요소의 ID가 루프에서 변경되지 않는다고 생각합니다. 따라서 동일한 ID를 가진 여러 요소가 있습니다. 이로 인해 이들 중 하나를 클릭하면 기본적으로 첫 번째로 클릭됩니다 (javascript는 찾을 수있는 첫 번째 ID를 선택합니다). 당신은 아마 당신이 각 붕괴 부분을 가리키는 링크를 변경할 수 있는지 확인해야

<% collection_of_users.each_with_index do |i, index| %> 
    ... 
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse<%= index.to_s %>"> 
    ... 
    <div id="collapse<&= index.to_s %>" class="accordion-body collapse in"> 
<% end %> 

참고 인 아코디언

에 올바른 클래스를 추가하는 루비의 each_with_index (docs) 기능을 사용하려면 몸에. 또한 나는 임베디드 루비에서 to_s이 필요하다는 것을 100 % 확신하지는 못했지만, 안전성이 더 좋다.

Answer 2

나는 이것이 당신의 ploberm에 대한보다 정확한 해결책이라고 생각합니다.

 <ul> 
     <div class="panel-group" id="accordion"> 
     <% collection_of_users.each_with_index do |i, index| %> 
      <div class="panel panel-default"> 
      <div class="panel-heading"> 
       <h4 class="panel-title"> 
       <li><a data-toggle="collapse" data-parent="#accordion" href="#collapse<%= index+1 %>"> 
        <%= i_title.capitalize %> 
       </a></li> 
       </h4> 
      </div> 
      <div id="collapse<%= index+1 %>" class="panel-collapse collapse"> 
       <div class="panel-body"> 
       ............................ 
       </div> 
      </div> 
      </div> 
     <% end %> 
     </div> 
     </ul>