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.

Reply

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

Reply

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

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 %>
Reply
Join the discussion
Create an account Log in

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

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

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

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

    © 2024 GoRails, LLC. All rights reserved.