Bootstrap手风琴折叠与红宝石哈希

Question

折叠只适用于第一个按钮，我知道这是因为只有第一个div id被设置为所有按钮。如何在使用hash.each时迭代并为每个元素创建新的div ID？

这里是我的ERB：

<% @contacts.each do |category, hash| %> 
<div class="panel-group" id=accordion"> 
<div class="panel panel-default"> 
    <div class="panel-heading"> 
    <h3 class="panel-title"><%= category %></h3> 
    </div> 
<div class="panel-body"> 
<ul class="list-group"> 
    <% hash.each do |contact| %> 
    <li class="list-group-item" style="border: none"> 
    <button type="button" class="btn btn-info" data-toggle="collapse" data-parent="#accordion" data-target="#demo"><%= contact['name'] %></button> 
    <div id="demo" class="panel-collapse collapse"> 
     <div class="panel-body"><%= contact['email'] %></br><%= contact['ext'] %> 
     </div> 
    </div> 
    </li> 
<% end %> 
    </ul> 
    </div> 
</div> 
</div> 
<% end %> 

下面是从我的.rb相应的代码：

get '/contact' do 
contact = Contacts.new 
@contacts = contact.getContacts 
@contacts.each { |s| puts "get /contact found contact #{s.last.first['name']}" } 
erb :contact 

Answer 1

尝试

<% hash.each_with_index do |contact, index| %> 
    <li class="list-group-item" style="border: none"> 
    <button type="button" class="btn btn-info" data-toggle="collapse" data-parent="#accordion" data-target="#collapse<%= index %>"><%= contact['name'] %></button> 
    <div id="collapse<%= index %>" class="panel-collapse collapse"> 
     <div class="panel-body"><%= contact['email'] %></br><%= contact['ext'] %> 
     </div> 
    </div> 
    </li> 
<% end %>