Close only target object

Question

I use this quick snippet with an image to close a show/hide DIV:

  $('a.close').click(function() { 
     $('#timeline-2010-1').hide(); 
     $('#timeline-2010-2').hide();

     return false; 
  });

The problem is that when I close one box all of the boxes close...

Is there a way to modify this so that when you click the image "x" on that specific DIV ID, only that one closes, and it doesn't close all of them?

Answer 1

Try something along this way:

  $('a.close').click(function() { 
     $(this).hide(); 
     return false; 
  });

The thing here is the this that refers to that particular object.

Answer 2

Like this:

$('a.close').click(function() { 
     $(this).closest('.Timeline').hide();

     return false; 
});

$(this).closest('.Timeline') will find the .Timeline element that contains the clicked element. You should replace the .Timeline selector as appropriate.

Answer 3

This code would close the parent div of the image that you're clicking on:

$("div img").click(function(){
  $(this).closest("div").hide();
});

Tied to your DIV IDs, it would be:

$("div[id^='timeline-2010-'] img").click(function(){
  $(this).closest("div").hide();
});