jQuery hide issue in register form

Question

I'm not great with jQuery, so I'm having some trouble I can't bypass in a project. I'm creating a register form with BuddyPress on this URL: http://medsimples.com/registrar/ (sorry for the portuguese, I'll guide you through).

In the last dropdown menu, I have the "Eu sou" (I am) field, which has "Paciente" (patient), "Médico" (physician) and "Estudante" (student) values.

Based on this, I'm using the following jQuery code to show/hide additional information on the form, if the users are physicians or students. The problem is, when we select Physician for example, all the form hides and the Medical div shows up. I don't want the whole form to hide and I don't know what is missed.

$(document).ready(function(){
    $('#Estudante').hide();
    $('#Medico').hide();
    $("#field_5").change(function(){
        $("#" + this.value).show().siblings().hide();
    });

    $("#field_5").change();
});

If someone can help me, I'd appreciate a lot. Thanks!

Answer 1

Try giving a common class to both the divs withe the id's Estudante and Medico like: class="additional-info"

Then you should try something like:

$(document).ready(function(){
    $('.additional-info').hide();
    $("#field_5").change(function(){
        $('.additional-info').hide(); // Just in Case one of the 2 div's is showing
        $("#" + $(this).val()).show();
    });
});

Also you should be carefull at the select because the value for Medico has an additional string which is "(a)" so the Medico div is never selected.