Event from the choice of jquery radio option

Question

I’m having trouble deploying the following function and would like your help;

I have a input with two options of radio. if the user selects the value, the jQuery removes the class hidden of a div and add in another, if it selects the value_2 the same occurs, but with another div. The problem is that I never came across this situation. I hug!

 .hidden{
   display:none;
   }

<div role="tabpanel" class="tab-pane active" id="tab_contabeis">
 <br/>
  <div class="radio">
    <label>
      <input type="radio" name="demo_radio" id="demo_radio" value="atendeu" checked>A elaboração dos Demonstrativos Contábeis e de Gestão <strong>Atendeu</strong> os Parâmetros da mencionada Instrução.
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="demo_radio" id="demo_radio_n" value="n_atendeu">A elaboração dos Demonstrativos Contábeis e de Gestão <strong>Não Atendeu</strong> os Parâmetros da mencionada Instrução.
    </label>
  </div>
  <br/>
  <div class="controle">
    <textarea id="demonstrativocontabeis" name="demonstrativocontabeis" class="form-control" rows="10">
    </textarea>
  </div>
  <div class="controle hidden">
    <textarea id="demonstrativocontabeis_n" name="demonstrativocontabeis_n" class="form-control hidden" rows="10">
    </textarea>
  </div>
</div>

Answer 1

Hello,

1 - I added two classes to the control

<div role="tabpanel" class="tab-pane active" id="tab_contabeis">
    <br/>
    <div class="radio">
        <label>
            <input type="radio" name="demo_radio" id="demo_radio" value="atendeu" checked>A elaboração dos Demonstrativos Contábeis e de Gestão <strong>Atendeu</strong> os Parâmetros da mencionada Instrução.</label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" name="demo_radio" id="demo_radio_n" value="n_atendeu">A elaboração dos Demonstrativos Contábeis e de Gestão <strong>Não Atendeu</strong> os Parâmetros da mencionada Instrução.</label>
    </div>
    <br/>
    <div class="controle atendeu">
        <textarea id="demonstrativocontabeis" name="demonstrativocontabeis" class="form-control" rows="10">atendeu</textarea>
    </div>
    <div class="controle nao-atendeu hidden">
        <textarea id="demonstrativocontabeis_n" name="demonstrativocontabeis_n" class="form-control hidden" rows="10">não atendeu</textarea>
    </div>
</div>

2 - your css

.hidden {
  display:none;
}

3 - jquery to control

//adiciona o evento para identificar quando foi alterado
jQuery('input[name="demo_radio"]').on("change", function () {
    //remove a class qeu esconde os itens
    jQuery(".hidden").removeClass("hidden");
    //verifica qual o item foi selecionado e coloca a classe hidden no outro
    if (jQuery(this).val() == "atendeu") {
        jQuery(".nao-atendeu").addClass("hidden");
    } else if (jQuery(this).val() == "n_atendeu") {
        jQuery(".atendeu").addClass("hidden");
    }
});

the link to the working example is here