Three biographical profiles with photos

Question

I'm an iPhone Developer mainly, and I'm very new to web development - especially jQuery.

My task: I have three divs, which each contain a short biography about a certain person. (I have three people: liz, chris and michael). Those divs are hidden at the start of my code, because they all belong to the class profile.

I have three images which are displayed throughout, and have the IDs: (lizIMG, chrisIMG, michaelIMG). When an image is clicked, any other biographies' divs should be hidden, and the selected biography's div should be shown.

Also, I have a tooltip above each image, if a div is hidden, it will say:

(Person Name) - Click to learn more

If a div is displayed, it will say:

(Person Name) - Click to hide

I have fully working code, but the code is far too long for the desired task. It's quite annoying because I know exactly how I would do this in Objective-C, but not in jQuery. I'm guessing re-factoring it will involve functions, and possibly arrays?

I would like to make this shorter.

$(document).ready(function() {
  $('div.profile').hide(); // Hide all the profiles
  $('#lizIMG').click(function() {
    if ($("#lizDiv").is(":visible")) {
        $('#lizTip').text('Click to learn more');
    }
    else {
        $('#lizTip').text('Click to hide');
    }   
    $('#lizDiv').slideToggle('slow');
    $('#chrisDiv').hide('slow');
    $('#chrisTip').text('Click to learn more');
    $('#michaelDiv').hide('slow');
    $('#michaelTip').text('Click to learn more');
});
$('#chrisIMG').click(function() {
    if ($("#chrisDiv").is(":visible")) {
        $('#chrisTip').text('Click to learn more');
    }
    else {
        $('#chrisTip').text('Click to hide');
    }   
    $('#chrisDiv').slideToggle('slow');
    $('#lizDiv').hide('slow');
    $('#lizTip').text('Click to learn more');
    $('#michaelDiv').hide('slow');
    $('#michaelTip').text('Click to learn more');
});
$('#michaelIMG').click(function() {
    $('#lizDiv').hide('slow');
    $('#lizTip').text('Click to learn more');
    $('#chrisDiv').hide('slow');
    $('#chrisTip').text('Click to learn more');
    if ($("#michaelDiv").is(":visible")) {
        $('#michaelTip').text('Click to learn more');
    }
    else {
        $('#michaelTip').text('Click to hide');
    }   
    $('#michaelDiv').slideToggle('slow');
});
$("#profiles img[title]").tooltip(); // Used to set text for the tooltips
});

Answer 1

Look at JQuery Accordion

Or if you don't want to use the Accordion then here is a variant:

function imgClickHandler(divBiographyId, divTooltipId){ 
  var divBiographySelector = "#" + divBiographyId;
  var divTooltipSelector = "#" + divTooltipId;
  if ($(divBiographySelector).is(":visible")) {
    $(divTooltipSelector).text('Click to learn more');
  }
  else {
    $(divTooltipSelector).text('Click to hide');
  } 
  $(divBiographySelector).slideToggle('slow');

  //.profileBiography - this css class you should add to lizDiv, chrisDiv, michaelDiv
  //.profileTip - this css class you should add to lizTip, chrisTip, michaelTip
  $(".profileBiography").not(divBiographySelector).hide('slow');
  $(".profileTip").not(divTooltipSelector).text('Click to learn more');
 }

$(document).ready(function() {
$('div.profile').hide(); // Hide all the profiles
var profiles = [{img: "lizIMG", biography: "lizDiv", tooltip: "lizTip"},
                {img: "chrisIMG", biography: "chrisDiv", tooltip: "chrisTip"},
                {img: "michaelIMG", biography: "michaelDiv", tooltip: "michaelTip"}];

$.each(profiles, function(){
  var biographyId = this.biography;
  var tooltipId = this.tooltip;
  $("#" + this.img).click(function(){
    imgClickHandler(biographyId, tooltipId);
  });
 });  
}