How to detect a link within div in jQuery?

Question

If someone clicks on a link within a div with the class "foo" I want the list items within this div to show. How can I do this?

Here's my failed attempt:

   $('div > li').hide();
   $('div.foo > a').click(function(event) {
       $('div.foo > li').show();
       event.preventDefault();
   });


<ul>
    <div class="foo">
        <a href="#">Animals +</a>
        <li>Cat</li>
        <li>Dog</li>
        <li>Rabbit</li>
    </div>
</ul>

Answer 1

you have a problem with your html.

It should be something like this,

<div class="foo">      
    <a href="#">Animals +</a>
    <ul>
       <li>Cat</li>
       <li>Dog</li>
       <li>Rabbit</li>
    </ul>
</div>

then in jQuery, like this,

$('div.foo > ul').hide();
$('div.foo > a').click(function(event) {
   $(this).next('ul').show();
   event.preventDefault();
});

here's a fiddle, and try not to forget putting it inside the ready handler

_{Welcome to stackoverflow.com
Don't forget to accept an answer}