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(); }); });