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();

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.