Not able to show hide div which is nearest to checkbox using JQuery

Question

I am using Ruby on Rails with Cocoon Gem to generate dynamic form. Using form User can add/remove their Education details.

My form looks like this:

<div class='nested-fields'>
  <div class='row'>
    <div class='col-md-6 col-sm-6'>
      <div class="form-group">
        <%= hidden_field_tag :redirect_to, :edit_education_path %>
        <%= f.label :institution_name, 'Institution Name'  %>
        <div class="input-with-icon">
          <%= f.text_field :institution_name, placeholder: 'Enter Institution Name ', class: 'form-control', required: true %>
          <i class="theme-cl ti-home"></i>
        </div>
      </div>
    </div>
    <div class='col-md-6 col-sm-6'>
      <div class="form-group">
        <%= f.label :course_name, 'Course Name'  %>
        <div class="input-with-icon">
          <%= f.text_field :course_name, placeholder: 'Enter Course Name', class: 'form-control', required: true %>
          <i class="theme-cl ti-mobile"></i>
        </div>
      </div>
    </div>
  </div>
  <div class='row'>
    <div class='col-md-6 col-sm-6'>
      <div class="form-group">
        <%= f.label :course_completed, 'Course Complete'  %>
        <div class="input-with-icon">
          <%= f.check_box :course_completed, class: 'form-control checkbox' %>
        </div>
      </div>
    </div>
    <div class='col-md-6 col-sm-6 finished_year'>
      <div class="form-group">
        <%= f.label :finished_year, 'Finished Year (optional)'  %>
        <div class="input-with-icon">
          <%= f.select :finished_year, WorkExperiencesHelper.years, { prompt: '-- Select --' }, class: 'form-control' %>
          <i class="theme-cl ti-mobile"></i>
        </div>
      </div>
    </div>
  </div>
  <div class='row expected_finished_time'>
    <div class='col-md-6 col-sm-6'>
      <div class="form-group">
        <%= f.label :expected_finished_month, 'Expected Finished Month (optional)'  %>
        <div class="input-with-icon">
          <%= f.select :expected_finished_month, WorkExperiencesHelper.months, { prompt: '-- Select --' }, class: 'form-control' %>
          <i class="theme-cl ti-mobile"></i>
        </div>
      </div>
    </div>
    <div class='col-md-6 col-sm-6'>
      <div class="form-group">
        <%= f.label :expected_finished_year, 'Expected Finished Year (optional)'  %>
        <div class="input-with-icon">
          <%= f.select :expected_finished_year, WorkExperiencesHelper.years, { prompt: '-- Select --' }, class: 'form-control' %>
          <i class="theme-cl ti-mobile"></i>
        </div>
      </div>
    </div>
  </div>
  <div class='row'>
    <div class='col-md-12 col-sm-12'>
      <div class="form-group">
        <%= f.label :course_highlights, 'Course Highlights (optional)' %>
        <%= f.text_area :course_highlights, rows: 10, placeholder: 'Add activities, projects, awards or achievements during your study.', class: 'form-control'  %>
      </div>
    </div>
  </div>

  <%= link_to_remove_association  f, class: 'btn btn-danger' do %>
    <i class="fa fa-trash"></i> Delete
  <% end %>
</div>

<script>
  $(document).ready(function() {
    $(".expected_finished_time").hide();
    $(".checkbox").change(function() {
      if (this.checked) {
        $(".expected_finished_time").hide();
        $(".finished_year").show();
      } else {
        $(".expected_finished_time").show();
        $(".finished_year").hide();
      }
    });
  });
</script>

By default checkbox is checked. What I want to obtain is when user uncheck the checkbox then closest div with class .finished_year should be hidden and closest div with class .expected_finished_year should be shown to user. With my current code all div with class .finished_year is getting hidden. But I want only the closest div to checkbox to be hidden. My Jquery looks like this:

<script>
  $(document).ready(function() {
    $(".expected_finished_time").hide();
    $(".checkbox").change(function() {
      if (this.checked) {
        $(".expected_finished_time").hide();
        $(".finished_year").show();
      } else {
        $(".expected_finished_time").show();
        $(".finished_year").hide();
      }
    });
  });
</script>

I have tried using (this).parent().closest('.finished_year').hide() but this is also not working. Cocoon Gem allows to add multiple Education details at once. So at any given time there could be multiple check boxes in the form. When user check/uncheck the checkbox I want the closest div to hide/show.

Answer 1

pretty simple:

$('.check-hide-show-content').hide(); // hide all content divs

// begin show/hide
$('.check-hide-show input:checkbox').change(function () {
    $('.check-hide-show-content').hide().eq($(this).index('.check-hide-show input:checkbox')).show();
    $(".check-hide-show input[type='checkbox']").not(this).prop("checked", false); // uncheck the other checkbox when this is checked
});