Show / Hide in a form when clicking an input radio

Question

I made a code that for some reason is not working it should work as follows.

When I click on input radio plegal entity it must open the form of legal person and when I click person must hide the form of legal person and display the of person remembering that by default the form of a physical person should be appearing follows my code

HTML:

<div class="bs-example mb-3 text-center">
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" name="bn" value="1" id="pessoaFisica" checked="checked">
                            <label class="custom-control-label" for="pessoaFisica">Pessoa Física</label>
                        </div>
                        <div class="custom-control custom-radio custom-control-inline">
                            <input type="radio" class="custom-control-input" name="bn" value="2" id="pessoaJuridica">
                            <label class="custom-control-label" for="pessoaJuridica">Pessoa Juridica</label>
                        </div>
                    </div>

<form class="form-register-pessoa-fisica" id="fisica" >
                        <div class="form-group">
                            <label for="exampleInputEmail1">Nome completo</label>
                            <input type="text" class="form-control input-dark-search-little -gray-medium" name="email" id="no" placeholder="Nome completo">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail1">Informe seu e-mail</label>
                            <input type="text" class="form-control input-dark-search-little -gray-medium" name="email" id="no" placeholder="Digite seu e-mail">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Digite sua senha</label>
                            <input type="password" class="form-control input-dark-search-little -gray-medium" id="exampleInputPassword1" placeholder="Password">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1">Confirmar sua senha</label>
                            <input type="password" class="form-control input-dark-search-little -gray-medium" id="exampleInputPassword1" placeholder="Password">
                        </div>
                        <div class="form-group">
                            <a href="login.php" class="forgot-passoword">Voltar</a>
                            <button type="submit" class="btn-default-gradient">Cadastrar</button>
                        </div>
                    </form>


<form class="form-register-pessoa-fisica" id="juridica" >
                    <div class="form-group">
                        <label for="exampleInputEmail1">Nome completo</label>
                        <input type="text" class="form-control input-dark-search-little -gray-medium" name="email" id="no" placeholder="Nome completo">
                    </div>
                </form>

JS:

<script>
        $(document).ready(function(){
            $("input[name$='bn']").click(function(){
                var radio_value = $(this).val();
                if(radio_value=='0') {
                    $("#fisica").hide("slow");
                    $("#juridica").hide("slow");
                }
                else if(radio_value=='1') {
                    $("#fisica").show("slow");
                    $("#juridica").hide("slow");
                }
                else if(radio_value=='2') {
                    $("#fisica").show("slow");
                    $("#juridica").hide("slow");
                }
            });
            $('[name="bn"]:checked').trigger('click');
        });
    </script>

Answer 1

Follows:

         $("input[name$='bn']").click(function(){
                var radio_value = $(this).val();
                if(radio_value=='0') {
                    $("#fisica").hide("slow");
                    $("#juridica").hide("slow");
                }
                else if(radio_value=='1') {
                    $("#fisica").show("slow");
                    $("#juridica").hide("slow");
                }
                else if(radio_value=='2') {
                    $("#fisica").hide("slow");
                    $("#juridica").show("slow");
                }
            });
            $('[name="bn"]:checked').trigger('click');
        });

Answer 2

else if(radio_value=='2') {
  $("#fisica").show("slow");
  $("#juridica").hide("slow");
}

On this line you forgot to change the function name, making #fisica to show() and #juridica to Hide() regardless if radio_value is 1 or 2. You will have to change the functions, it will look like this:

else if(radio_value=='2') {
  $("#fisica").hide("slow");
  $("#juridica").show("slow");
}