I have a list, in which each <li> there is an element, which I´d like to toggle an event when clicked on it.

1. <ul>
2. <li class="someclass">
3.         <a href="#" class="foo">click here</a>
4.         <div class="bar">
5.                 show this on click
6.         </div>
7. </li>
8. <li class="someclass">
9.         <a href="#" class="foo">click here</a>
10.         <div class="bar">
11.                 show this on click
12.         </div>
13. </li>
14. </ul>

Using jquery I should be able to do something like this:

1. $(document).ready(function() {
2.         $(".foo").click(function(){
3.             $(".bar").slideDown("fast");
4.             return false;
5.         });
6.        
7.     });

But as you may expect, both div.bar are affected by my puny jquery-code. I don´t want to apply id´s to the divs, as there might be about 200 of them. Is it possible to select the div.bar, related to the parent <li>?

Something like (forgive my noobish code... just to clarify... I´m completely new to this and a pea-brain...)

1. $(document).ready(function() {
2.         $(".foo").click(function(){
3.             $this.parent.li.(".bar").slideDown("fast");
4.             return false;
5.         });
6.        
7.     });

Thanks blackmane