In my scenario, I have a total of 5 checkboxes and corresponding to each checkbox, there are 5 div elements. The functionality that I need is that when a checkbox is checked, the associated div should be displayed; otherwise, it should be hidden. The checkboxes are positioned fixed while the divs are part of a scrolling section. Additionally, I am looking to implement a function where when a checkbox is checked, the page automatically scrolls to display the corresponding 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 go to the 5th 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>