Question

My html looks like:

<a href="..." id="a1">
    <img src="..." style="display: block;">
    <img src="..." style="display: none;">
</a>

Now when a1 is clicked, I want to toggle all of the images.

I tried:

$("#a1").click(function() {
  $(this).find("img").each( function() {
    $(this).toggle();
  });
});

but it didn’t work. Does find only get the 1st found element?

Why?

Answer 1

You need to return false from the click handler otherwise the hyperlink will be followed when clicked.

Also, you do not need the each, simple calling toggle on find will also do the trick.

This works:

$("#a1").click(function() {
  $(this).find("img").toggle();
    return false;
});

Demo