Traversing the DOM using jQuery
<p>Upon a click on an IMG, I would like to get to the next subsequent DIV so that the DIVs content can either be displayed or hidden depending on its current display state.</p>

<p>This is an HTML snippet:</p>

<pre><code>&lt;div&gt;
  &lt;span class="expand"&gt;&lt;img src="images/plus.gif"&gt;&lt;/span&gt;
  &lt;span&gt;Subject Heading&lt;/span&gt;
&lt;/div&gt;
&lt;div class="record hidden"&gt;Display or Hide this text&lt;/div&gt;
</code></pre>

<p>I have some code (<a href="http://stackoverflow.com/questions/123401/using-jquery-to-find-the-next-table-row#123518">provided in another answer on this site</a>) for doing this in a table. Would I set an event listener for the img or the containing span? not sure how to use parent(), next(), sibling() functions to get around....</p>

<p>Also, how do you test if your navigation is getting to the right element? can you use an alert to display the id or value?</p>

<p>Any help is appreciated
Thanks</p>
