Simple jQuery tooltip

Question

My tooltip works fine, but I need to simplify this code.

var genderSelect = {
 getGenderSelect: function () {
 if(this.val('Girl')){
 $(this).find('#girl-character').show();
 $(this).find('#boy-character').hide();
 }else if(this.val('Boy')){
 $(this).find('#boy-character').show();
 $(this).find('#girl-character').hide();
 }
 },
 init: function(){
 $('.control-label input[name="gender"]').change(
 $('#caracters').show();
 genderSelect.getGenderSelect();
 )};
};
genderSelect.init();

• SuperBiasedMan: Welcome to Code Review! This question is incomplete. To help reviewers give you better answers, please add sufficient context to your question. The more you tell us about what your code does and what the purpose of doing that is, the easier it will be for reviewers to help you. See also this meta question.
• user5325596: If #girl-character is unique on the page (and it should be given that it is an id), you don't need $(this).find('#girl-character'), just do $('#girl-character'). Likewise for #boy-character.

Answer 1

You can shorten the getGenderSelect function like this:

var genderSelect = {
 getGenderSelect: function () {
 $(this).find('#girl-character').toggle(this.val() == 'Girl');
 $(this).find('#boy-character').toggle(this.val() == 'Boy'); 
 },
 init: function(){
 $('.control-label input[name="gender"]').change(
 $('#caracters').show();
 genderSelect.getGenderSelect();
 )};
};
genderSelect.init();

The toggle function takes a boolean which determines whether to show or hide the selected elements.