I have 2 radio buttons in the view:

<input type="radio" name="gender" id="female" />Female
            <input type="radio" name="gender" id="male" />Male

Followed by 2 divs:

  <div class="infobox hidden" id="GenderIsFemale">
                <h4>
                    We love pink!
                </h4>
  </div>
  <div class="infobox hidden" id="GenderIsMale">
                <h4>
                    We love blue!
                </h4>
  </div>

I'm trying to write the JQuery that would show the div based on the radio selection, here is what I have:

 <script type="text/javascript">

$(document).ready(function () {
        $('#female').change(function () {
            $('GenderIsMale').hide();


            $('GenderIsFemale').show();
        });

        $('#male').change(function () {
            $('GenderIsFemale').hide();

            $('GenderIsMale').show();
        });


    });
    
</script>

This JQuery is not working. What am I missing? Thanks!