CSS and jQuery Simple Question

Question

Just starting using css and jQuery and I have a CSS class called .content which I'm using for a side of the page navigation box, picture of the day box, statistics box, etc., which are layed out using a definition lists.

So I need it when I click on the <dt> tag it slides up/down the <ul> tag underneath it which is simple enough. but how do I determine which which instance of the .content class was clicked on... I know seperate id's would work but was wondering if there is a quicker way? Hope I explained my problem clear enough any help would be greatly appricated =]

Thanks in advance!

Answer 1

When you're inside a click handler (or any event handler), this refers to the current element, so you would do this:

$(".content").click(function() {
  $(this).find('ul').slideToggle();
  //or possibly..
  $(this).next('ul').slideToggle();
});

Where $(".content") inside would again select all of them (sounds like your current issue), this refers to the DOM element that was clicked, so you can just do whatever action you want to it specifically.

Answer 2

Specify using $(this) within your function for the selected class. That will then use the correct class clicked on. For example:

$('.content').click(function() {
   $(this).hide();
});

This is obviously in it's simplest form and you can expand from there.