Ruby on Railsの条件をブートストラップアコーディオンで囲む方法

Question

アコーディオンでラップしたいインデックスページには次の条件があります。

index.html.erb

<% Category.top_level.each do |cat| %> 
    <div><%= cat.name %></div> #=>This lists top level categories 
    <ul> 
     <% cat.lawyers.each do |law| %> 
      <li> 
      <%= law.name %> #=>This lists lawyers under top level categories 
      </li> 
     <% end %> 
    </ul> 
    <% cat.sub_categories.each do |subcat| %> 
     <ul> 
      <%= subcat.name %> #=>This lists corresponding subcategories under the top level categories 
      <ul> 
      <% subcat.lawyers.each do |law| %> 
       <li><%= law.name %></li> #=>This lists lawyers that are under corresponding subcategories 
      <% end %> 
      </ul> 
     </ul> 
    <% end %> 
<% end %> 

私のコードをグラフィカルに表示し、私は

を行うには好きなものを正しく

作業

私はそれをBootstrap Accordionで実装するのが好きです。

Answer 1

トップレベルのカテゴリごとに1つのパネルを表示し、その下に弁護士の一覧を表示することができます。他のサブレベルが必要な場合は、単にdiv class = "panel-body"内に別のアコーディオンを追加することができます。

<div class="panel-group" id="accordion"> 
<% Category.top_level.each_with_index do |cat, index| %> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapse<%= index.to_s %>"> 
     <%= cat.name %> #=>This lists top level categories 
     </a> 
     </h4> 
    </div> 
    <div id="collapse<%= index.to_s %>" class="panel-collapse collapse"> 
     <div class="panel-body"> 
     <ul> 
      <% cat.lawyers.each do |law| %> 
       <li> 
       <%= law.name %> #=>This lists lawyers under top level categories 
       </li> 
      <% end %> 
     </ul> 
     </div> 
    </div> 
    </div> 
<% end %> 
</div>