Аккордеон не разрушается должным образом при наличии нескольких аккордеонов

Question

TL; DR Как я могу подойти к этой ситуации, когда у вас есть один аккордеон, который позволяет использовать несколько элементов модели?

У меня есть приложение Rails, которое поддерживает Twitter Bootstrap, поэтому я пытался настроить несколько аккордеонных панелей, используя ERB, чтобы получить динамический контент из модели. Вот мои application.js:

// This is a manifest file that'll be compiled into application.js, which will include all the files 
// listed below. 
// 
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, 
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. 
// 
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 
// compiled file. 
// 
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 
// about supported directives. 
// 
//= require jquery 
//= require jquery_ujs 
//= require bootstrap-sprockets 
//= require turbolinks 
//= require_tree . 

Самое главное, что я хочу иметь гармошку, которая делает каждую из них по отдельности. Вот мой index.html.erb:

<div class="container"> 
    <h1>Showing all <%= @courses.count %> courses</h1> 

    <% if @courses.present? %> 
    <% @courses.each do |course| %> 
     <%= link_to course.name, course_path(course) %> 
     <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
     <div class="panel panel-default"> 
      <div class="panel-heading" role="tab" id="headingOne"> 
      <h4 class="panel-title"> 
       <%= link_to course.name, '#collapseOne', 'role' => 'button', data: {toggle: 'collapse', parent: '#accordion' } %> 
      </h4> 
      </div> 
      <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body"> 
       <%= render partial: 'courses/show', id: course %> 
      </div> 
      </div> 
     </div> 
    <% end %> 
    <% else %> 
    <p>You should create a course!</p> 
    <% end %> 

    <br><br> 
    <%= link_to "New Course", new_course_path %> 
</div> 

Это только позволяет мне разрушить первый аккордеон, а не другие. Как я могу справиться с этой проблемой с помощью аккордеона?

Answer 1

В вашем цикле вы используете один и тот же идентификатор элемента id="accordion" для всех ваших панелей групп:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 

Вы должны назначить динамический идентификатор каждой итерации.

<% @courses.each_with_index do |course, index| %> 
    <%= link_to course.name, course_path(course) %> 
    <div class="panel-group" id="accordion-<%= index %>" role="tablist" aria-multiselectable="true"> 
    <%# Snipped for brevity %>