<p>Using jQuery, how do you bind a click event to a table cell (below, <code>class="expand"</code>) that will change the <code>image src</code> (which is in the clicked cell - original will be plus.gif, alternating with minus.gif) and <code>hide/show</code> the row immediately below it based on whether that row has a class of <code>hide</code>. (show it if it has a class of "hide" and hide if it does not have a class of "hide"). I am flexible with changing ids and classes in the markup.</p>

<p>Thanks</p>

<p>Table rows</p>

<pre><code>&lt;tr&gt;
  &lt;td class="expand"&gt;&lt;img src="plus.gif"/&gt;&lt;/td&gt;
  &lt;td&gt;Data1&lt;/td&gt;&lt;td&gt;Data2&lt;/td&gt;&lt;td&gt;Data3&lt;/td&gt;
&lt;/tr&gt;
&lt;tr class="show hide"&gt;
  &lt;td&gt; &lt;/td&gt;
  &lt;td&gt;Data4&lt;/td&gt;&lt;td&gt;Data5&lt;/td&gt;&lt;td&gt;Data6&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

You don't need the show and hide tags:
```
```
$(document).ready(function(){   
    $('.expand').click(function() {
        if( $(this).hasClass('hidden') )
            $('img', this).attr("src", "plus.jpg");
        else 
            $('img', this).attr("src", "minus.jpg");

        $(this).toggleClass('hidden');
        $(this).parent().next().toggle();
    });
});
```
```
edit: Okay, I added the code for changing the image.  That's just one way to do it.  I added a class to the expand attribute as a tag when the row that follows is hidden and removed it when the row was shown.