Two Click Functions with Parents

Question

I am building a specific time checkbox and upon click I need the days of the week to drop down with a checkbox. Once the user clicks that checkbox the [From - To] appears.

The thing is I have multiple of these going down and need to only display for the certain one I clicked.

So far I only have it set it for Monday but I cant get the from-to to appear on the first one.

<div class="specificHolder">

      <div class="row">
       <div class="col-md-3">
         Specific Time<input type="checkbox" class="specificTime">
       </div>
      </div>

          <div class="specific_on" style="display:none">
            <div class="row">
              <div class="col-md-12">
                Monday<input type="checkbox" class="monday">
              </div>
            </div>
         </div>
  </div>

  <div class="specificHolder">

      <div class="row">
       <div class="col-md-3">
         Specific Time<input type="checkbox" class="specificTime">
       </div>
      </div>

          <div class="specific_on" style="display:none">
            <div class="row">
              <div class="col-md-12">
                Monday<input type="checkbox" class="monday">
                  <div class="monday_to_from" style="display:none">
                    <input type="text" value="From">
                    <input type="text" value="To">
                  </div>
              </div>
            </div>
         </div>

$('.specificTime').on('click', function() {
    $(this).parents('.specificHolder').find('.specific_on').toggle('slow');
});

$('.monday').on('click', function(){
    $(this).parents('.specificHolder').find('.monday_to_from').toggle('slow');
});

https://jsfiddle.net/y1b8fr20/

Answer 1

Update

Using toggle() between more than one trigger creates a confusing behavior. This update separates the sliding of up and down and listens for the change event instead of the click event for more control between .monday checkboxes. Now it will behave as follows:

• The to from boxes only appears when a .monday checkbox is checked
• If a .monday checkbox is unchecked, the .to from boxes will slideUp.
• If either .monday is checked, fromto stays.
• fromto will only slideUp if both .mondays are unchecked

---

You have only one from to input so this is sufficient:

   $('.monday').on('change', function() {

  if ($('.monday').is(':checked')) {

    $('.monday_to_from').slideDown('slow');

  } else {

    $('.monday_to_from').slideUp('slow');
  }
});

Move this out of the influence of the second set of checkboxes:

<div class="monday_to_from" style="display:none">
  <input type="text" value="From">
  <input type="text" value="To">
</div>

Demo

$('.specificTime').on('click', function() {
  $(this).parents('.specificHolder').find('.specific_on').toggle('slow');
});

$('.monday').on('change', function() {

  if ($('.monday').is(':checked')) {

    $('.monday_to_from').slideDown('slow');
    
  } else {
  
    $('.monday_to_from').slideUp('slow');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="specificHolder">

  <div class="row">
    <div class="col-md-3">
      Specific Time<input type="checkbox" class="specificTime">
    </div>
  </div>

  <div class="specific_on" style="display:none">
    <div class="row">
      <div class="col-md-12">
        Monday<input type="checkbox" class="monday">
      </div>
    </div>
  </div>
</div>

<div class="specificHolder">

  <div class="row">
    <div class="col-md-3">
      Specific Time<input type="checkbox" class="specificTime">
    </div>
  </div>

  <div class="specific_on" style="display:none">
    <div class="row">
      <div class="col-md-12">
        Monday<input type="checkbox" class="monday">

      </div>
    </div>

  </div>
</div>
<div class="monday_to_from" style="display:none">
  <input type="text" value="From">
  <input type="text" value="To">
</div>