How do I make the fields come hidden and only appear with the selection of a radio?
I'm going to put down the fields and the script that I use to hide as I click (which is already working), my problem is that when I open the forms, the fields are there and I need them to appear only when I select some Radio button
follows:
<script>
$(function(){
$('#aprovadoSim').change(function(){
$('#divWelcome').show();
$('#divObservacoes').hide();
$('#divRetornoCliente').hide();
});
$('#aprovadoNao').change(function(){
$('#divObservacoes').show();
$('#divWelcome').hide();
$('#divRetornoCliente').hide();
});
$('#aprRetornoSim').change(function(){
$('#divWelcome').show();
$('#divObservacoes').hide();
$('#divRetornoCliente').hide();
});
$('#aprRetornoNao').change(function(){
$('#divObservacoes').hide();
$('#divWelcome').hide();
$('#divRetornoCliente').show();
});
});
</script>
HTML
<fieldset id="fs_aprovacao">
<div class="panel panel-truecpa">
<legend></legend><br />
<div class="panel-body">
<div class="col-sm-12 col-sm-offset-2">
<div class="form-group" style="margin: 0 auto;">
<div class="col-sm-6" id="divAprovado">
<label for="aprovado" class="col-sm-8 control-label">Aprovado?</label>
<div class="radio" >
<label> <input type="radio" name="aprovado" id="aprovadoSim" value="SIM" >Sim </label>
<label> <input type="radio" name="aprovado" id="aprovadoNao" value="NAO" checked> Não </label>
</div>
</div>
</div></br>
<div class="form-group" style="margin: 0 auto;">
<div class="col-sm-6" id="divAprRetorno">
<label for="aprRetorno" class="col-sm-8 control-label">Aprovado?</label>
<div class="radio" >
<label> <input type="radio" name="aprovadoRetorno" id="aprRetornoSim" value="SIM" >Sim </label>
<label> <input type="radio" name="aprovadoRetorno" id="aprRetornoNao" value="NAO" > Não </label>
</div>
</div>
</div></br>
<div class="form-group" style="margin: 0 auto;">
<div class="col-sm-8" id="divWelcome">
<label for="nofiticaAdmissao" class="control-label">E-mail de Confirmação:</label>
<select class="form-control" id="nofiticaAdmissao" name="nofiticaAdmissao" dataset="colleague" datasetkey="colleaguePK.colleagueId" datasetvalue="colleagueName"></select>
<input type="hidden" id="colleagueId" name="colleagueId" />
</div>
</div>
<div class="form-group" style="margin: 0 auto;" id="divObservacoes">
<div class="col-sm-8" id="definicaoCliente" >
<label for="observacoes" class="control-label">Observações:</label>
<textarea class="form-control" name="observacoes" id="observacoes" rows="4" ></textarea>
</div>
</div><br/>
<div class="form-group" style="margin: 0 auto;" id="divRetornoCliente">
<div class="col-sm-8" id="definicaoCliente" >
<label for="retornoCliente" class="control-label">Observações:</label>
<textarea class="form-control" name="retornoCliente" id="retornoCliente" rows="4" ></textarea>
</div>
</div><br/>
</div>
</div>
</div>
</fieldset>