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