Question

I have this line of code in an for loop:

echo '<toggle_me style="display: none"><img align="center" src="images/icon/pdf_mail.png" /></a></toggle_me>';

With this jQuery:

<script>
$("img").click(function ()
{
    $("toggle_me").toggle();
});
</script>

Ofcourse this toggles all images, how can I only toggle the one clicked?

Answer 1

You actually made up your own HMTL tag? You crazy? Please read up about Classes and IDs, you then use those css selectors in jQuery to select the togglers/imgs.

For example:

<div class="toggler">
    <img src="..." />
    <span>Toggle</span>
</div>

jQuery:

$('.toggler span').click(function(){
    $(this).prev().toggle();
});

That’s a very quick solution that should work for you, I highly recommend reading up about classes/ids and selectors and you will easily see how you could improve this code for your needs.