2
\$\begingroup\$

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
});
\$\endgroup\$
3
\$\begingroup\$

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);
  });
 });  
}
\$\endgroup\$
  • \$\begingroup\$ great - but there's one thing wrong with your code, it doesn't hide the other two divs after adding one \$\endgroup\$ – Alex Coplan Aug 15 '11 at 17:28
  • \$\begingroup\$ WOOPS! - forgot to set the CSS classes... I do apologise. Thank you for putting the effort into this - that's great code \$\endgroup\$ – Alex Coplan Aug 15 '11 at 17:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.