Show div if input radio button is selected - css

Question

I want to show multiple div if radio button is checked. Here is the code that I tried.
HTML:
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Do you have Extras Cover</label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input yes" name="radio" type="radio" id="yes" value="yes">
<label class="form-check-label" for="yes"> Yes </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" name="radio" type="radio" id="no" value="no">
<label class="form-check-label" for="no"> No </label>
</div>
</div>
</div>
<div class="form-group row show">
<label for="" class="col-sm-2 col-form-label">Medicare Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" >
</div>
</div>
<div class="form-group row show">
<label for="" class="col-sm-2 col-form-label">Medicare Address</label>
<div class="col-sm-10">
<input type="text" class="form-control" >
</div>
</div>
CSS:
.show{
display:none ;
}
input#yes:checked ~ div.show{
display: block;
}
If 'YES' button is checked then 'SHOW' class div will show. If I put the 'SHOW' class div with the input field it works. But when I put it outside of the input field div it doesn't work.
Can anyone please help me with my code structure.
Please see the image for better understanding.
my code

Answer 1

The css solution will indeed only work if those 'show' divs are inside the same parent as the radio buttons. If you want them to be outside that input field div, then use a bit of javascript.
document.querySelector('input#yes').addEventListener('click', function() {
Array.from(document.querySelectorAll('.form-group.show')).forEach((group) => {
group.style.display = "block";
})
})
document.querySelector('input#no').addEventListener('click', function() {
Array.from(document.querySelectorAll('.form-group.show')).forEach((group) => {
group.style.display = "none";
})
})
.form-group.show {
display: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Do you have Extras Cover</label>
<div class="col-sm-10">
<div class="form-check form-check-inline">
<input class="form-check-input yes" name="radio" type="radio" id="yes" value="yes">
<label class="form-check-label" for="yes"> Yes </label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" name="radio" type="radio" id="no" value="no">
<label class="form-check-label" for="no"> No </label>
</div>
</div>
</div>
<div class="form-group row show">
<label for="" class="col-sm-2 col-form-label">Medicare Number</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group row show">
<label for="" class="col-sm-2 col-form-label">Medicare Address</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>