tengo dos input de tipo radio, uno con valor "SI" y otro con valor "NO", ambos contenidos en una clase (form-group), necesito que cuando se dé click en NO, este me muestre otros elementos, y si doy click en SI, los oculte, hasta ahora solo he podido hacerlo con selector adyacente en estado :cheked, mi necesidad es que los elementos no pueden ser adyacentes al input, alguien podría ayudarme? por favor
avance de lo que llevo
.hide {
width: 100%;
height: 0px;
opacity: 0;
overflow: hidden;
background: red;
transition: all 0.5s ease;
border-left: 1px solid #000;
border-right: 1px solid #000;
}
input[type="checkbox"]:checked + .hide {
height: 100px;
opacity: 1;
padding: 20px;
}
#ifOne {
background: green;
transition: all 0.5s ease;
height: 0px;
}
#inlineRadio2:checked ~ #ifOne {
height: 100px;
opacity: 1;
}
<div class="ex3">
<label for="item-3">muestra al dar clicl un contenedor rojo</label>
<input type="checkbox" name="one" id="item">
<div class="hide">Equation billions upon billions! Courage of our questions decipherment, take root and flourish, cosmic ocean paroxysm of global death. Light years inconspicuous motes of rock and gas from which we spring something incredible is waiting to be known,
muse about!
</div>
</div>
<hr>
<div class="form-group">
<label>Es su compañía nueva? <b class="required" title="Campos Requeridos">*</b> </label>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlRadioOpt" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">Si</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlRadioOpt" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">No</label>
</div>
</div>
<div class="form-group" id="ifOne">
<h1>Tiene que aparecer cuando doy click en NO un contenedor verde y desaparecer en SI </h1>
</div>