# Three biographical profiles with photos

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:

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


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

• great - but there's one thing wrong with your code, it doesn't hide the other two divs after adding one – Alex Coplan Aug 15 '11 at 17:28
• WOOPS! - forgot to set the CSS classes... I do apologise. Thank you for putting the effort into this - that's great code – Alex Coplan Aug 15 '11 at 17:33