I'm trying to display multiple divs if a radio button is checked in my code. Here's what I have attempted:
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;
}
When the 'YES' button is checked, the 'SHOW' class div will be displayed. It works when I place the 'SHOW' class div with the input field, but not outside of it.
If someone could assist me with correcting my code structure, I would greatly appreciate it.
For a visual representation, please refer to the image here: my code