Bootstrap / Rails-手风琴内部的字符串插值

Question

I've been struggling with string interpolation inside an HTML accordion. It's more a logic issue that I can't seem to figure out (fairly new to rails). The problem I have is that while the layout is fine, when I click to collapse any of the 3 collapsible panels they all collapse. (Because I only have 1 #collapse).

Outermost 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 Partial

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

Controller

  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

Your IDs need to be unique. Instead of hard-coding id="collapse1" , use the ID of the record:

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

Perform the same interpolation for the href of the <a> tag responsible for collapsing and expanding the accordion.

Answer 2

Use category id id="#collapse<%= c.id %>" to interpolate with element id in _catalog Partial.

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