All threads / collapse-able form feature in nested forms

Ask A Question

Notifications

You’re not receiving notifications from this thread.

collapse-able form feature in nested forms

John Munyi asked in General

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 %>
Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 39,609+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.