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

0 votes

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.

Aug 2 in Web Development by gaurav
• 18,960 points
96 views

1 answer to this question.

0 votes

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
});
answered Aug 2 by rajatha
• 7,440 points

Related Questions In Web Development

0 votes
0 answers

jQuery: Test if checkbox is NOT checked

I'm having trouble figuring this out. I ...READ MORE

Jun 29 in Web Development by gaurav
• 18,960 points
56 views
0 votes
0 answers

How to check radio button is checked using JQuery?

I have two radio buttons in one ...READ MORE

Jun 29 in Web Development by gaurav
• 18,960 points
37 views
0 votes
0 answers

Simple Registration page info is not added to database using localhost

When I use localhost, after completing my ...READ MORE

Jul 24 in Web Development by Kithuzzz
• 11,640 points
31 views
0 votes
0 answers

How to stretch a GIF to fill the whole div using jQuery Mobile?

I'm using jQuery Mobile to create a ...READ MORE

Aug 22 in Web Development by gaurav
• 18,960 points
22 views
0 votes
1 answer

How to use jquery with asp.net ajax?

If you weren't aware, Microsoft is planning ...READ MORE

answered Oct 15, 2018 in IoT (Internet of Things) by Annie97
• 2,160 points
201 views
0 votes
1 answer

Is 'sparkline' a method?

I suggest you to check 2 things That jquery.sparkline.js is actually ...READ MORE

answered Nov 9, 2018 in Apache Spark by Frankie
• 9,830 points
624 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,510 points
327 views
0 votes
1 answer

Error: Global Variable is not accessable to local function

Hey kartik, A variable declared outside a function has a ...READ MORE

answered Feb 19, 2020 in PHP by Niroj
• 82,780 points
298 views
0 votes
1 answer

How to hide a div with jQuery?

We hide the divs by adding a CSS ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,440 points
34 views
0 votes
1 answer

How to place images using jQuery masonry plugin to start

You were just missing a css class that adjusts ...READ MORE

answered Jun 22 in Web Development by rajatha
• 7,440 points
28 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP