title: Traversing the DOM using jQuery
body: <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="https://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>