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!