Target one of 8 images in a UL

Question

I am ew to JQuery and this is prob an easy question but here we go....

I have a UL and in each LI I have an image

  <ul id="thumnail">
     <li id="tab 1">  <img class="tagline"> </li>
     <li id="tab 2">  <img class="tagline"> </li>
     <li id="tab 3">  <img class="tagline"> </li>
     <li id="tab 4">  <img class="tagline"> </li>
    </ul>

The images are hidden and when you click in each li I want the image in it to display. the code I have will display all images when any of the li is clicked on but how to I target and display each image on its own.

Here is the JQuery I have thus far (that shows all images)

   $('#tumbnail li').on('click', function () { 
                                         $('.tagline').css('display','block')

Answer 1

This should do it:

$('#thumbnail li').on('click', function () { 
            $(this).children(".tagline").show();

});

You also had some typos in targeting your list, which wasn't helping. You can see it working here:

http://jsfiddle.net/d7WbW/

Answer 2

$('#tumbnail li').on('click', function (event) { 
    event.target.css('display','block')
});

Answer 3

try this:

$(document).ready(function () {
     $('#thumnail li').on('click', function () { 
       $(this).find("img").show();
       // you can use toggle() to show/hide image on every click
       //$(this).find("img").toggle();
     });
});

here is a full playing code: http://jsfiddle.net/maximua/7mK8c/