JQuery Noobish Help: Img OnClick

Question

I am very new to jQuery and am having trouble understanding how to do this:

I have an image of class "imgexpander" with the src attribute set to "img1.png". When a click is clicked, it should see if the div with the "expand" class is currently hidden or visible.

• If it is hidden (by default), it shows it (I know how to use show ()) and changes the src attribute of the image to "img2.png".

OR

• If the div is visible, it hides it and changes the src attribute of the image to "img1.png".

I am not familiar with the features available in jQuery yet. How can I do that? Can you give me some sample code that I can work with?

Thanks in advance!

UPDATE : I forgot to add a detail: is it possible to somehow make onclick images of the "imgexpander" class affect only divs that are all included together in one big div? So, the hierarchy will be something like this:

• big div
  • image with onclick
  • div to be affected
• another big div
  • image with onclick
  • div to be affected

The desired result would be that each “onclick image” only affects the “divs that need to be influenced” inside its corresponding “big div”. Is it possible? I'm not sure the current answer will do, but thanks!

Answer 1

What about:

$("img.imgexpander").click
(
  function()
  {        
    var expandableDIVs = $(this)
                           .parents("div.bigdiv:first")
                           .find("div.expand");    
    expandableDIVs.toggle();
    this.src = expandableDIVs.is(":visible") ? "img2.png" : "img1.png";
  }
);

IMG imgexpander. DIV . src , DIV, "div.expand".

, jQuery DIV, div.expand, JavaScript .

this DOM, "img.imgexpander". , .

EDIT. div.expand , OP. DIV, DIV, img.

, , . , IMG DIV - bigdiv, . :first.