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!

Answer 1

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");
  });
});