Question

Using jQuery, how do you bind a click event to a table cell (below, class='expand') that will change the image src (which is in the clicked cell – original will be plus.gif, alternating with minus.gif) and hide/show the row immediately below it based on whether that row has a class of hide. (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.

Thanks

Table rows

<tr>   <td class='expand'><img src='plus.gif'/></td>   <td>Data1</td><td>Data2</td><td>Data3</td> </tr> <tr class='show hide'>   <td> </td>   <td>Data4</td><td>Data5</td><td>Data6</td> </tr> 

Answer 1

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.