Rails - Inserting select elements from controller in partial

Question

(Very new to rails and bootstrap) I'm working on a project in which I want to insert elements into an html accordion, 10 elements to be exact. Only 3 of the elements are collapsable. I've read the layouts and rendering part of the Rails documentation but I'm still very confused as to how to do it especially in having to assign the collapsable class to only 3 elements. Any advice is helpful, thanks in advance.

x.HTML.erb

<h4>
    <a href="#">
        <li><%= link_to category.name, catalogo_path(cat_id: category.id), remote: true %></li>
    </a>
</h4>


<% category.subcategories.each do |cat| %>
    <li><%= link_to cat.name, catalogo_path(cat_id: cat.id), remote: true %></li>

<% end %>

Partial

<h4>
    <a href="#">
        <li><%= link_to category.name, catalogo_path(cat_id: category.id), remote: true %></li>
    </a>
</h4>
<% category.subcategories.each do |cat| %>
    <li><%= link_to cat.name, catalogo_path(cat_id: cat.id), remote: true %></li>
<% end %>

The HTML accordion structure I want to use:

<div class="accordion" id="accordion2">
                <div class="accordion-group">
                    <h4>
                        <a href="#">Angulos</a>
                    </h4>
                    <h4>    
                        <a href="#">Soleras</a>
                    </h4>
                    <h4>
                        <a href="#">Semiflechas</a>
                    </h4>
                    <h4>
                        <a href="#">Redondos</a>
                    </h4>
                    <div class="accordion-heading">
                        <h4>
                            <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">Cuadrados</a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="accordion-body collapse in">
                        <a href="#" class="accordion-inner">Cuadrados Normales</a>
                        <a href="#" class="accordion-inner">Cuadrados Retorcidos</a>
                    </div>
                    <h4>
                        <a href="#">Canal</a>
                    </h4>
                    <h4>
                        <a href="#">Vigas IPR</a>
                    </h4>
                    <h4>
                        <a href="#">Vigas IPS</a>
                    </h4>
                </div>
                <div class="accordion-group">
                    <div class="accordion-heading"> 
                        <h4>
                            <a class="accordion-toggle" data-toggle="collapse" href="#collapseTwo">Placas</a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="accordion-body collapse">
                        <a href="#" class="accordion-inner">Placa de Rollo</a><br>
                        <a href="#" class="accordion-inner">Placa de Grado</a>
                    </div>
                </div>
                <div class="accordion-group">
                    <div class="accordion-heading"> 
                        <h4>
                            <a class="accordion-toggle" data-toggle="collapse" href="#collapseThree">Laminas</a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="accordion-body collapse">
                        <a href="#" class="accordion-inner">Laminas Calientes</a><br>
                        <a href="#" class="accordion-inner">Laminas Frias</a>
                        <a href="#" class="accordion-inner">Laminas Antiderrapantes</a>
                    </div>
                </div>
            </div>

Answer 1

If I understand your question correctly, then you want to use partials to generate the HTML you posted. Here's a suggestion.

I don't think you need an .accordion-group around each set that you want to be collapsable. You can just put everything in one.

Here's the outermost ERB template.

<div class="accordion" id="accordion2">
  <div class="accordion-group">
    <%= @categories.each do |category| %>
      <% if category.subcategories.any? %>
        <%= render partial: "category_with_sub", locals: {category: category} %>
      <% else %>
        <%= render partial: "category", locals: {category: category} %>
      <% end %>
    <% end %>
  </div>
</div>

Partial _category_with_sub.html.erb

<div class="accordion-heading">
  <h4>
    <a href="#">
      <li><%= link_to category.name, catalogo_path(cat_id: category.id), class: "accordion-toggle", "data-toggle" => "collapse", remote: true %></li>
    </a>
  </h4>
</div>

<div id="collapseOne" class="accordion-body collapse in">
  <% category.subcategories.each do |cat| %>
    <li><%= link_to cat.name, catalogo_path(cat_id: cat.id), class: "accordion-inner", remote: true %></li>
  <% end %>
</div>

Partial _category.html.erb

<h4>
  <a href="#">
    <li><%= link_to category.name, catalogo_path(cat_id: category.id), remote: true %></li>
  </a>
</h4>

One final suggestion. It looks like you are using an old version of bootstrap. You might want to consider upgrading to the latest version.

UPDATE

Edited categories to be @categories

Assuming your controller looks something like this.

class CategoriesController < ApplicationController
  def index # or whatever action you want
    @categories = Category.all # or whatever query you want to use
  end
end