Bootstrap/Rails - Строка Интерполяция внутри аккордеона

Question

Я боролся со строчной интерполяцией внутри HTML-аккордеона. Это скорее логический вопрос, который я, похоже, не могу понять (довольно новый для рельсов). Проблема в том, что, хотя макет в порядке, когда я нажимаю, чтобы свернуть любую из трех разборных панелей, все они рушится. (Потому что у меня только 1 #collapse).

ERB Наружная

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-2 col-sm-3"> 
       <h2>Categorias</h2> 
       <div class="panel-group" id="accordion"> 
        <%= render partial: "categories/catalog", collection: @categories, as: :c %> 
      </div> 
     </div> 

_catalog Частичное

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> 
       <%= c.name %> 
       <span class="badge">4</span> 
      </a> 
     </h4> 
    </div> 
    <div id="collapse1" class="panel-collapse collapse in"> 
     <% c.subcategories.each do |sc| %> 
      <div class="panel-body"> 
       <a href="#"> 
        <%= sc.name %> 
       </a> 
      </div> 
     <% end %> 
    </div> 
</div> 

Контроллер

def catalogo 
    @categories = Category.where("parent_id IS NULL") 
    unless params[:cat_id].blank? 
     @products = Product.where(category_id: params[:cat_id]).paginate(:page => params[:page], :per_page => 50) 
    else 
     @products = Product.all.paginate(:page => params[:page], :per_page => 50) 
    end 
     @categorieswparent = Category.where("parent_id IS NOT NULL") 
    end 

Answer 1

Ваши идентификаторы должны быть уникальными. Вместо жесткого кодирования id="collapse1", используйте идентификатор записи:

id="collapse<%= sc.id %>" 

Выполните те же интерполяции для href из <a> тега, ответственного за разрушения и расширения аккордеона.

Answer 2

Используйте идентификатор категории id="#collapse<%= c.id %>" для интерполяции с идентификатором элемента в _catalog Частичный.

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapse<%= c.id %>"> 
       <%= c.name %> 
       <span class="badge">4</span> 
      </a> 
     </h4> 
    </div> 
    <div id="collapse<%= c.id %>" class="panel-collapse collapse in"> 
     <% c.subcategories.each do |sc| %> 
      <div class="panel-body"> 
       <a href="#"> 
        <%= sc.name %> 
       </a> 
      </div> 
     <% end %> 
    </div> 
</div>