radio button muestra div, cambiar div al cambiar radio

[Ojopex2]

Hola amigos, soy principiante en javascript y he estado navegando en busca de ayuda y me he encontrado con esta respuesta que me ha servido mucho pero quedo inconcluso

http://www.forosdelweb.com/f13/como-...8/#post2776735
(Preferí hacer un hilo nuevo ya que el otro era antiguo)
el código

Código Javascript:

function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
 

Código HTML:

<input id="Otro" name="Otro" type="radio" value="t1" onclick="showMe('oculto', this)" > Opcion 1
<input id="Otro2" name="Otro" type="radio" value="t2" onclick="showMe('oculto2', this)" > Opcion 2
<input id="Otro3" name="Otro" type="radio" value="t3" onclick="showMe('oculto3', this)" > Opcion 3
<div id="oculto" style="display:none" >
<input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value1" ><input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value2" ><input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value3" >
<br />+++++++++++++++++++++++
</div>
<div id="oculto2" style="display:none" >
<input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value1" ><input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value2" ><input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value3" >
<br />+++++++++++++++++++++++
</div>
<div id="oculto3" style="display:none" >
<input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value1" ><input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value2" ><input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value3" >
<br />+++++++++++++++++++++++
</div>
 

Hace lo que promete, al elegir una opcion en el radio, despliega el div oculto, y lo que faltaría es que al cambiar de opción, oculte la que esta seleccionada con anterioridad, ¿Cómo debería hacerlo?
Una imagen como ejemplo:
En esta imagen primero seleccione un radio, luego "me arrepentí" y elejí otro, quedó la opcion 1 y opcion 2 desplegados. le hice las cruces ++++++ para diferenciar.




Espero que me puedan ayudar.

Saludos.

[diamari]

De lo visto, el código esta hecho para lo que quieres. Solo que no con botones de radio. Lo mas simple seria utilizando checkbox. Si no habría que añadir en showme una verificación para cada uno de los opciones.

[Ojopex2]

No, no me sirve checkbox, ya que quiero que el usuario solo pueda seleccionar solo una opción. Gracias, investigaré el lado de la verificación.

Saludos.

[diamari]

Código:

function showMe () {
	var vis;
	var box;
	for (i=1;i<=3;i++){
		box = document.getElementById('Otro' + i);
		vis = (box.checked) ? "block" : "none";
		document.getElementById('oculto' + i).style.display = vis;
	}
}

Código:

<form name="form1">
    <input id="Otro1" name="Otro" type="radio" value="t1" onclick="showMe()" > Opcion 1
<input id="Otro2" name="Otro" type="radio" value="t2" onclick="showMe()" > Opcion 2
<input id="Otro3" name="Otro" type="radio" value="t3" onclick="showMe()" > Opcion 3
<div id="oculto1" style="display:none" >
<input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value1a" ><input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value2" ><input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value3" >
<br />+++++++++++++++++++++++
</div>
<div id="oculto2" style="display:none" >
<input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value1b" ><input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value2" ><input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value3" >
<br />+++++++++++++++++++++++
</div>
<div id="oculto3" style="display:none" >
<input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value1c" ><input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value2" ><input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value3" >
<br />+++++++++++++++++++++++
</form>

[Ojopex2]

:D Muuuchas graciaaas, no me lo esperaba, eres muy amable.

Saludos!

[avalos22]

function oculta(id){var D = document.getElementById(id);D.style.display='none';}
function muestra(id){var D = document.getElementById(id);D.style.display='block';}

<input type="radio" id="ImpV" checked="checked" onclick="muestra('a');" />

input type="radio" id="ImpT" onclick="muestra('t'); " />

<div id="a" >contenido del div a</div>
<div id="t" >contenido del div t</div>