0

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>

2 respuestas 2

1

Para poder jugar con el contenido como lo deseas, los input[type="radio"] y el div ifOne deben estar en el mismo nivel en estructura HTML, es decir en un solo bloque solo así puedes acceder mediante css, de lo contrario no funcionara.

Aquí te dejo el código, espero te funcione y sea lo que andas buscando:

.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>
  
  
    <input class="form-check-input" type="radio" name="inlRadioOpt" id="inlineRadio1" value="option1">
    <label class="form-check-label" for="inlineRadio1">Si</label>
 
    <input class="form-check-input" type="radio" name="inlRadioOpt" id="inlineRadio2" value="option2">
    <label class="form-check-label" for="inlineRadio2">No</label>
 
  
  <div class="form-group" id="ifOne">
    <h1>Tiene que aparecer cuando doy click en NO un contenedor verde y desaparecer en SI </h1>
  </div>

</div>

0

Puedes realizar javascript con Jquery. 1.- En tu html creas dos secciones (divs) en los cuales agregas el contido que mostraras en caso de seleccionar el input rario si o no 2.- En css indicas que por defecto oculte esos dos divs 3.- En el javascript cada que seleccione el input radio, obtienes el valor, si el valor es option1, muestras el div de la sección si. Y viceversa con el input no

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 $(".form-check-input").click( function(){
		 if($(this).val() == 'option1'){
			$('#section-radio-si').show();
			$('#section-radio-no').hide();
		 }
		 else if($(this).val() == 'option2'){
			$('#section-radio-si').hide();
			$('#section-radio-no').show();
		 }
		
		
	})
#section-radio-no,
	#section-radio-si{
		display: none;
	}
<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 id="section-radio-si">
				(SI) Aqui agrega tu contenido de Si
		  </div>
		</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 id="section-radio-no">
				(NO) Aqui agrega tu contenido de NO
		  </div>
		</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>

$(".form-check-input").click( function(){
		 if($(this).val() == 'option1'){
			$('#section-radio-si').show();
			$('#section-radio-no').hide();
		 }
		 else if($(this).val() == 'option2'){
			$('#section-radio-si').hide();
			$('#section-radio-no').show();
		 }
		
		
	})
#section-radio-no,
	#section-radio-si{
		display: none;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 id="section-radio-si">
				(SI) Aqui agrega tu contenido de Si
		  </div>
		</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 id="section-radio-no">
				(NO) Aqui agrega tu contenido de NO
		  </div>
		</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>

1
  • MMMM está bien tu solución, no quería usar script porque el formulario tiene muchos campos y tendría que hacer muchos bloques de ese script para cada caso, pero bueno, quería saber si por css se podría hacer como en mi ejemplo del contenedor rojo, muchas gracias Commented el 23 abr. 2018 a las 15:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.