Question

This is my first usage of jQuery. I just want a quick solution for the following:

It is very simple; when div #a1.toolbotbut is clicked, div #a1p is shown.
When #a2.toolbotbut is clicked, div #a2p is shown.
When #b2.toolbotbut is clicked, div #b2p is shown, etc etc.
So the indivdual jquery looks like this:

$('#a1.toolbotbut').click(function() {
  $('#a1p.overlay').fadeIn('slow');
  });

and

$('#a2.toolbotbut').click(function() {
  $('#a2p.overlay').fadeIn('slow');
  });

Could you tell me how to use $(this) or var to pick out the div id of the selected and insert that into $(‘…p.overlay’) so I can use two lines of code for the whole function. Don’t worry about hiding or marking active… just the basic technique I need here.

Thanks so much.

Answer 1

Like this:

$('.toolbotbut').click(function() {
  var id = $(this).attr('id');
  var overlayId = '#' + id + 'p.overlay';
  $(overlayId).fadeIn('slow');
});