allow hide/show on div to only work within its radio group and not affect the other radio groups in the same form
so I have this form whereby there are 3 radio groups which hides and shows its own set of divs depending on what is selected.
the problem is that the code I have right now hides the radio content divs across all the 3 radio groups. how do I go about solving this?
Ideally the contents will all “Yes” content will show when form loads, and when someone selects “No” in question1, radioContentOne hides, and radioContentTwo will appear.
currently when I select “No” in question 1. radioContentOne, three, four, five, six hides. I am pretty new to jquery and not sure where i went wrong.
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>question 1<label>
<div class="custom-radio-checkbox d-inline-block">
<div class="radio-input>
<input name="radioGroup1" type="radio" id="radio-no-border-inline-7" data-toggle="collapse" value="radioContentOne" checked>
<label for="radio-no-border-inline-1">Yes</label>
</div>
</div>
<div class="custom-radio-checkbox d-inline-block">
<div class="radio-input>
<input name="radioGroup1" type="radio" id="radio-no-border-inline-8" data-toggle="collapse" value="radioContentTwo">
<label for="radio-no-border-inline-2">No</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>question 2<label>
<div class="custom-radio-checkbox d-inline-block">
<div class="radio-input>
<input name="radioGroup2" type="radio" id="radio-no-border-inline-7" data-toggle="collapse" value="radioContentThree" checked>
<label for="radio-no-border-inline-1">Yes</label>
</div>
</div>
<div class="custom-radio-checkbox d-inline-block">
<div class="radio-input>
<input name="radioGroup2" type="radio" id="radio-no-border-inline-8" data-toggle="collapse" value="radioContentFour">
<label for="radio-no-border-inline-2">No</label>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>question 3<label>
<div class="custom-radio-checkbox d-inline-block">
<div class="radio-input>
<input name="radioGroup3" type="radio" id="radio-no-border-inline-7" data-toggle="collapse" value="radioContentFive" checked>
<label for="radio-no-border-inline-1">Yes</label>
</div>
</div>
<div class="custom-radio-checkbox d-inline-block">
<div class="radio-input>
<input name="radioGroup3" type="radio" id="radio-no-border-inline-8" data-toggle="collapse" value="radioContentSix">
<label for="radio-no-border-inline-2">No</label>
</div>
</div>
</div>
</div>
</div>
<div class="radioContentOne radioOption">content1</div>
<div class="radioContentTwo radioOption">content2</div>
<div class="radioContentThree radioOption">content3</div>
<div class="radioContentFour radioOption">content4</div>
<div class="radioContentFive radioOption">content5</div>
<div class="radioContentSix radioOption">content6</div>
$(document).ready(function(){
$("[class^='radioGroup']").click(function(){
var inputValue = $(this).attr("value");
var targetBox = $("." + inputValue);
$('.radioOption').not(targetBox).hide();
$(targetBox).show();
});
});
Answer
At the moment you are targeting all items within the HTML in order to only target items within the clicked group you can use the .parents selector to find a parent to then search for the related items. https://api.jquery.com/parents/
$(document).ready(function(){
$("[class^='radioGroup']").click(function(){
var inputValue = $(this).attr("value");
var parents = $(this).parents(".form-group");
var targetBox = parents.find("." + inputValue);
parents.find('.radioOption').not(targetBox).hide();
parents.find(targetBox).show();
});
});