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!

"<dt> tag it slides up/down the <ul>" Shouldn't that be dd? — Yi Jiang
– Yi Jiang, Commented Sep 6, 2010 at 16:07

Nick Craver · Accepted Answer · 2010-09-06 11:19:11Z

3

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.

answered Sep 6, 2010 at 11:19

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shiverz Over a year ago

Yeah i did try that mate but my problem is i need something like ` $(".content").click(function() { $(this + "ul").dosomething(); });` Which doesnt work for me :<

Nick Craver Over a year ago

@Shiverz - I updated the answer to show how this is done, if it's a child, use .find(), or it's a sibling, use .next() :)

Nick Craver Over a year ago

@Shiverz - welcome :) and welcome to SO!, be sure to accept answers on this and future questions, it'll make future ones more appealing to would-be answerers :)

simnom · Accepted Answer · 2010-09-06 11:20:39Z

0

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.

answered Sep 6, 2010 at 11:20

simnom

2,6201 gold badge25 silver badges35 bronze badges

Collectives™ on Stack Overflow

CSS and jQuery Simple Question

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related