Targeting a specific jQuery element with the same class name

Question

Possible duplicate:
How to select an element by class inside "this" in jQuery

I'm new to jQuery ... I think this has something to do with using the "this" command, but not sure.

I have a page that programmatically creates several such divs:

<div class="moreinfolink">Click For More Information <div class="moreinfotext">Additional Info Here</div> </div> 

So, there are several .moreinfolink and .moreinfotext classes on the page.

I used this code to switch the divinfotext div:

 $('.moreinfolink').click(function() { $('.moreinfotext').toggle('slow', function() { }); 

But this, obviously, means that for ALL sections of more information that exist on the page, there is a switch.

Two questions: How can I do this for a specific child div that is inside the parent divinfolink div? Is there a better way to do this than the one I'm going to do?

Thanks!

Answer 1

You can use .find (as @FelixKling suggests):

 $('.moreinfolink').click(function() { $(this).find('.moreinfotext').toggle('slow', function() { ... }); }); 

Example: http://jsfiddle.net/hejFq/

Answer 2

This fiddle shows you how to do this: http://jsfiddle.net/ZAwTL/

Or this fiddle that shows the call to the find() method directly, as Felix Kling suggests.

HTML example

 <div class="moreinfolink">Click For More Information <div class="moreinfotext">Additional Info Here</div> </div> <br> <br> <div class="moreinfolink">Click For More Information <div class="moreinfotext">Additional Info Here</div> </div> <br> <br> <div class="moreinfolink">Click For More Information <div class="moreinfotext">Additional Info Here</div> </div> 

Javascript

 $('.moreinfolink').click(function() { $(this).find('.moreinfotext').toggle('slow', function() { }); }); 

Answer 3

 $('.moreinfolink').click(function() { $(this).children('.moreinfotext').slideToggle('slow'); }); 

I deleted the empty function that you had ... or not enough information was provided to support it, since it was there with an error.