Trying to change img src if another element is visible with jQuery
<p>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.</p>

<p>Here's the HTML:</p>

<pre><code>&lt;div class="panel"&gt;Contact info&lt;/div&gt;
&lt;p class="flip"&gt;&lt;img src="images/contactExpand.png" /&gt;Expand&lt;/p&gt;
</code></pre>

<p>And the jQuery:</p>

<pre><code>$(".flip").click(function(){
    $(".panel").slideToggle("slow");
});
</code></pre>

<p>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):</p>

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

<p>Am I missing something? Thanks for any help!</p>
