Rails 4 - jQuery to hide initially, then toggle with click

Im having trouble resolving conflicts between my jQuery and javascript.

One of the javascript conflicts comes from trying to use dependent-fields gem. See the outline of the problem here: Rails - Conflicts between jQuery and javascript

Instead of trying to solve that problem, I'm trying to figure out how to make the jQuery code that directly manipulates my forms to hide and show data in the way that the gem serves to do (or is intended to do).

I have made a file in my app/assets/javascripts called: projects.js.coffee. It has:

$(document).ready(function() {

Im not expecting it to do the toggle part, but I was hoping it might work to hide the content in the check_project_milestones tag. It doesnt.

In my projects form, I have:

<%= f.input :has_milestones, as: :boolean, boolean_style: :inline, :label => 'Does this research project have identifiable milestones or decision points?', id: 'check_project_milestones' %>

                        <%= content_tag :div, data: {'checkbox-id': 'check_project_milestones', 'checkbox-value': 'true' } do %>

                            <div class="intpol2">
                            <%= f.simple_fields_for :milestones do |f| %>

                              <%= render 'milestones/milestone_fields', f: f %>
                            <% end %>
                        <% end %>

                      <div class="row">

                        <div class="col-md-6">

                           <%= link_to_add_association 'Add a milestone', f, :milestones, partial: 'milestones/milestone_fields' %>


My objective is that everything but the first question is initially hidden. Then when the first question checkbox is ticked, the remainder is visible. If the box is subsequently unticked, then it reverts to being hidden.

Can anyone see what I've done wrong?



Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.