I found this code and have currently incorporated it into my site and although its working fine, I'd like to modify it but don't know how! I use it by constructing a html table that looks like:

<table class=detail>

<tr class=parent>

<td>1</td> <td>2</td> <td>3</td>

<tr class=child>

<td>blah</td>blah<td>blah</td><td>blah</td>

Now if I click on any part of the parent row the child row expands. However what I'd like it to do is to only expand if I click on cells 1 and 2. Any idea how I should approach it?

2. $(document).ready(function() {
3.       $('table.detail').each(function() {
4.         var $table = $(this);
5.         $table.find('.parent').click(function() {
6.             $(this).nextUntil('.parent').toggle(); // must use jQuery 1.4 for nextUntil() method
7.         });
8. 
   
9.         var $childRows = $table.find('tbody tr').not('.parent').hide();
10.         $table.find('button.hide').click(function() {
11.            $childRows.hide();
12.         });
13.         $table.find('button.show').click(function() {
14.            $childRows.show();
15.         });
16.     });