Как обернуть условие 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.

Answer 1

Вы можете попробовать это, чтобы отобразить одну панель для каждой категории верхнего уровня и списка юристов под ними. Если вы хотите использовать другие суб-уровни, вы можете просто добавить еще один аккордеон внутри div-класса = "panel-body". Не забудьте правильно изменить идентификаторы div class = "panel-collapse", чтобы сделать эту работу

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