Jquery traversing images
<p>I'm trying to write a way of handling a button press so that a div can expand &amp; collapse and a button updates from reading 'open' to 'hide' (along with updating ALT tags). The toggling part is fine. I just can't get my head around the traversing aspects. </p>

<p>Two buttons are presented but CSS is applied so only one is shown (the open one). When clicked the hideImage needs to be visible and the openImage needs to be removed. Pretty straightforward.</p>

<p>Here is the HTML: </p>

<pre><code>&lt;tr&gt;
&lt;td&gt;text&lt;/td&gt;
&lt;td class="tdclass"&gt;&lt;a href="" class="hrefclass"&gt;&lt;img src="openImage.gif" class="openImage" border="1"&gt;&lt;/a&gt;
&lt;td class="tdclass"&gt;&lt;a href="" class="hrefclass"&gt;&lt;img src="hideImage.gif" class="hideImage hiddenImage" border="1"&gt;&lt;/a&gt;&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>Is there an easy way of doing this with JQuery?</p>

<p>Also, why doesn't this work?</p>

<pre><code>$('.openImage').parent().parent().find('.hideImage')
</code></pre>

<p>I have assumed that I can traverse back up to the  and find the 'hideImage' class. </p>

<p>Help!</p>
