Javascript 手风琴不'；当有多个手风琴时，不能正确折叠

TL；DR当您有一个手风琴允许一个模型中的多个项目时，我如何处理这种情况

我有一个Rails应用程序支持Twitter引导，所以我尝试使用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>

显示所有课程
“按钮”，数据：{切换：“折叠”，父项：'#手风琴'}%>
你应该创建一个课程

---

它只让我折叠第一个手风琴，而不是其他手风琴。如何使用accordion处理此问题？

在循环中，您对所有面板组使用相同的元素id

id=“accordion”

：

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

您应该为每个迭代分配动态id

<% @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 %>

我对此有点困惑。我应该输入一个

id=“

或与之相关的东西吗？@RodrigoArgumedo你可以使用类似我刚才添加到答案中的代码。