collapse-able form feature in nested forms

Hi Guys I am looking for a way to implement a collapsible feature within nested forms, such that during edit the existing forms dont open up in full and user decides which forms he / she wants to dive into using a collapsible panel to open the form in full size, is there an out of the box gem or way to implement that.

Hey John!

If you're using Bootstrap, I sometimes use their collapse / accordion JS lib for this kind of thing: http://getbootstrap.com/javascript/#collapse
http://getbootstrap.com/javascript/#collapse-example-accordion

Hey Chris,

The Collapse / accordion js works but if you need to generate that in a loop then there is a problem, because the collapse use an ID which will not be unique in the case of the code below. id there a way we can pass or generate a unique id for each panel that is generated

  <div class="associated-forms">
          <h3>Associated coaching sessions</h3>
           <% @weekly_performance_review.coaching_forms.each do |coaching_form| %>
             <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
               <div class="panel panel-default">
                 <div class="panel-heading" role="tab" id="headingOne">
                   <h4 class="panel-title">
                     <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <h4> Coaching form dated <%= "#{coaching_form.date_of_session}" %></h4>
                     </a>
                  </h4>
               </div>
              <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                  <div class="panel-body">
                  <h4>coaching form goes here</h4>
                </div>
              </div>
            </div>
          </div>
          <% end %>
      </div>

i got it working i had to tweek the above in to this

    <% @weekly_performance_review.coaching_forms.each_with_index do |coaching_form, index| %>
               <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                 <div class="panel panel-default">
                   <div class="panel-heading" role="tab" id="headingOne">
                     <h4 class="panel-title">
                         <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<%= index.to_s %>" aria-expanded="true" aria-controls="collapseOne">
                        <h4> Coaching form dated <%= "#{coaching_form.date_of_session}" %></h4>
                       </a>
                    </h4>
                  </div>
                   <div id="collapse<%= index.to_s %>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                     <h4>coaching form goes here</h4>
                   </div>
                 </div>
               </div>
             </div>
           <% end %>