Mostrar e ocultar divs
Boa tarde galera.
Bom, estou DESESPERADO. kkkkk
Preciso resolver hoje vários problemas do meu tcc, pois semana que vem preciso fazer uma breve apresentação.
É o seguinte...
Tenho dois rádio button.
EXEMPLO: Quando clicar no radio button "UM" preciso que apareça logo abaixo um texto de informação dele.
Quando clicar no radio button "DOIS" preciso que desapareça as infos do radio button "UM" e no lugar apareça as infos do radio button "DOIS".
Fiz uns códigos em javascript, css e html mas não está funcionando.
Os códigos que tenho são esses:
OBS.: SALVE OS ARQUIVOS TODOS NA MESMA PASTA E COM OS DEVIDOS NOMES
PÁGINA COM OS RADIOS BUTTON - SALVE COMO index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="[http://www.w3.org/1999/xhtml"](http://www.w3.org/1999/xhtml)>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITULO</title>
<script src="mostrar_ocultar.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form action="#" method="POST" enctype="multipart/form-data" name="cad_lugar">
<input type="radio" name="opcao" value="um"/>Exemplo 1
<input type="radio" name="opcao" value="dois"/>Exemplo 2
<div id="um">
Infos radio button 1:
</div>
<div id="dois">
Infos radio button 2:
</div>
</form>
</body>
</html>
----------------------------------------------------------------------------------------------------------
PÁGINA JAVA SCRIPT - SALVE COMO mostrar_ocultar.js
$(document).ready(function(){
$("#um").hide();
$("#dois").hide();
$("input[type=radio][name=opcao][value=um]").click(function(){
$("#um").show("slow");
$("#dois").hide();
});
$("input[type=radio][name=opcao][value=dois]").click(function(){
$("#dois").show("slow");
$("#um").hide();
});
});
----------------------------------------------------------------------------------------------------------
PÁGINA CSS - SALVE COMO style.css
#div1 {
height:200px;
width:300px;
}
#div2 {
height:200px;
width:300px;
}
Bom galera, é isso. Espero que alguém possa me ajudar o mais breve possível. Valeu desde já (:
Discussão (1)
Carregando comentários...