Skip to main content

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 https://codepen.io/andres3dmd/pen/aGzqdW

.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>

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 https://codepen.io/andres3dmd/pen/aGzqdW

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>

Origen Enlace

Mostrar y ocultar elementos dependiendo de un estado específico en css

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 https://codepen.io/andres3dmd/pen/aGzqdW