Trying to change img src if another element is visible with jQuery

Question

I have a div ("panel" class) on my page that toggles open/closed on the click of a paragraph element ("flip" class), which has an image inside of it.

Here's the HTML:

<div class="panel">Contact info</div>
<p class="flip"><img src="images/contactExpand.png" />Expand</p>

And the jQuery:

$(".flip").click(function(){
    $(".panel").slideToggle("slow");
});

Everything works fine so far, but I want the image src to change to "contactCollapse.png" when the panel div is visible. This doesn't seem to do anything (image just stays the same):

if ($(".panel").is(":visible") == true) {
    $(".flip img").attr("src","../images/contactCollapse.png")
}
else {
    $(".flip img").attr("src","../images/contactExpand.png")
}

Am I missing something? Thanks for any help!

Nick Craver · Accepted Answer · 2010-12-29 21:51:37Z

2

Make sure to check at the end of the animation, as it'll be visible at the start no matter which direction you're animating, like this:

$(".flip").click(function(){
  $(".panel").slideToggle("slow", function() {
    $(".flip img").attr("src", $(this).is(":visible")
        ? "../images/contactCollapse.png"
        : "../images/contactExpand.png");
  });
});

answered Dec 29, 2010 at 21:51

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jondavidjohn Over a year ago

just to add to this answer, this is the concept of a callback function, executing after the original function completes. Very useful to chain actions together in jQuery.

zsalzbank · Accepted Answer · 2010-12-29 21:50:58Z

0

Are you sure the URL is correct? You have images/contactExpand.png in the original code and ../images/contactExpand.png in your javascript.

Also - are your sure this code works correctly? $(".panel").is(":visible") == true. Maybe if you change it to $(".panel:visible").length == 1.

answered Dec 29, 2010 at 21:50

zsalzbank

9,8611 gold badge28 silver badges39 bronze badges

1 Comment

R.J. Over a year ago

For the URL, my javascript is inside a folder so I needed to navigate back up a directory. However, I tried changing the URL and it still didn't change anything, so I don't think the jQuery code is even working at all. I tried changing the code to what you suggested and it still wasn't changing anything.

Brad Christie · Accepted Answer · 2010-12-29 21:54:42Z

0

That's because the status isn't change until after the slide is performed. Try placing your code in the callback of the slideToggle:

$(".flip").click(function(){
    $(".panel").slideToggle("slow",function(){
        if ($(".panel").is(":visible")) {
            $(".flip img").attr("src","../images/contactCollapse.png")
        }
        else {
            $(".flip img").attr("src","../images/contactExpand.png")
        }
    });
});

answered Dec 29, 2010 at 21:54

Brad Christie

102k16 gold badges160 silver badges200 bronze badges

2 Comments

Brad Christie Over a year ago

@NIckCraver hit it before I did, didn't get the "There is an answer already posted" message while I was composing. ;p

R.J. Over a year ago

Yes that solution (as well as your version) worked. Thank you!

Collectives™ on Stack Overflow

Trying to change img src if another element is visible with jQuery

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related