if checkbox cheked go to shown div

Question

I have 5 checkbox and 5 div. If checkbox is checked div is .show else div is hide. checkboxes has fixed position and scrolling parts are opened divs. I need to add function if checkbox is checked->show div and go to div

$('#first').click(function() {
  if ($(this).is(':checked')) {

    $("#fifth").show(400);
  } else {
    $("#fifth").hide(400);
  }
});

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

      <input id="first" type="checkbox" class="styled" checked>
      <label for="checkboxhovuz">
      On check you g to 5-th div
      </label>


<div class="row" >
   <br><br><br><br><br><br>text first<br><br><br>
</div>
<div class="row">
   <br><br><br><br><br><br>text second<br><br><br>
</div>
<div class="row">
   <br><br><br><br><br><br>text third<br><br><br>
</div>
<div class="row">
   <br><br><br><br><br><br>text fourth<br><br><br>
</div>
<div class="row" id="fifth">
   <br><br><br><br><br><br>text fifth<br><br><br>
</div>

`I need to add function if checkbox is checked->show div and go to div` And why you don't do it? What holdes you back? http://stackoverflow.com/help/how-to-ask — Twinfriends, Dec 14 '17 at 07:44
If you're looking for a way to scroll to a specific element, you should take a look at this: https://stackoverflow.com/questions/6677035/jquery-scroll-to-element — Titus, Dec 14 '17 at 07:45
Possible duplicate of [Scroll / Jump to id without jQuery](https://stackoverflow.com/questions/13266746/scroll-jump-to-id-without-jquery) — Vipin Kumar, Dec 14 '17 at 07:46

score 4 · Accepted Answer · answered Dec 14 '17 at 07:49

Consider using the .animate() method to scroll to the element in question when the conditional statement evaluates to true, e.g:

$('html, body').animate({
        scrollTop: $("#fifth").offset().top
    }, 2000);

Code Snippet Demonstration:

$('#first').click(function() {

  if ($(this).is(':checked')) {
  
    $("#fifth").show(400);
    
    $('html, body').animate({
        scrollTop: $("#fifth").offset().top
    }, 2000);
    
  } else {
  
    $("#fifth").hide(400);
    
  }
  
});

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

    <input id="first" type="checkbox" class="styled" checked>
    <label for="checkboxhovuz">
      On check you g to 5-th div
      </label>


    <div class="row">
      <br><br><br><br><br><br>text first<br><br><br>
    </div>
    <div class="row">
      <br><br><br><br><br><br>text second<br><br><br>
    </div>
    <div class="row">
      <br><br><br><br><br><br>text third<br><br><br>
    </div>
    <div class="row">
      <br><br><br><br><br><br>text fourth<br><br><br>
    </div>
    <div class="row" id="fifth">
      <br><br><br><br><br><br>text fifth<br><br><br>
    </div>
    <div class="row">
      <br><br><br><br><br><br>text sixth<br><br><br>
    </div>
    <div class="row">
      <br><br><br><br><br><br>text seventh<br><br><br>
    </div>
    <div class="row">
      <br><br><br><br><br><br>text eigth<br><br><br>
    </div>

@VilleKoo thanks for the question, it is a good one. As I understand it, `.on()` is generally a better method to use than `.click()` since it provides all functionality required for attaching event handlers. The `change` event type is limited to `` elements, `` boxes and `<select>` elements and is sent to an element when its *value changes*.</select> — UncaughtTypeError, Dec 14 '17 at 08:25

score 0 · Answer 2 · answered Dec 14 '17 at 07:51

0

try this one

$(document).ready(function() {
  if ($('#first').is(':checked')) {
    $("#fifth").show(400);
  } else {
    $("#fifth").hide(400);
  }
});

answered Dec 14 '17 at 07:51

Jerrin stephen

204
3
12

score 0 · Answer 3 · answered Dec 14 '17 at 07:55

I had to add document.getElementById('tulantisular').scrollIntoView();

So total code is, which is taken from Scroll / Jump to id without jQuery

$('#first').click(function() {
  if ($(this).is(':checked')) {
    $("#fifth").show();
    document.getElementById('fifth').scrollIntoView();
  } else {
    $("#fifth").hide();
  }
});

if checkbox cheked go to shown div

3 Answers3