showing adjacent rows in a table using jquery

by Anand Jee

HTML

<table>
  <tbody>
    <tr class="text-left"><td>Row 1</td></tr>
    <tr class="hideMe"><td>hidden 1</td> </tr>
    <tr class="hideMe"> <td>hidden 1</td></tr>
    <tr class="text-left"><td>Row 2</td></tr>
    <tr class="hideMe"> <td>hidden 2</td></tr>
    <tr class="text-left"><td>Row 3</td></tr>
  </tbody>
</table>

CSS

table{font-family:calibri;border:1px solid #ddd;border-collapse:collapse;}
tr td{border:1px solid #ddd;border-collapse:collapse;padding:5px;}
tr.hideMe {display: none;background:#d9d9d9;cursor:default;}
tr.hideMe:hover{background:#d9d9d9;}
tr{cursor:pointer;}
tr:hover{background:#b5b5b5;}

JavaScript

$('tr.text-left').click(function () {   
    $(this).nextUntil("tr.text-left").toggle('slow');
});