Hey guys, I'd like to create a toggle event for 2 different TD's in my table row. the event should show / hide the next table row.

<table>
<tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td class="clickable1">6</td> <td class="clickable2">7</td>
</tr>
<tr><td>this row should be toggled between show/hide once one of the clickable TDs were clicked</td></tr>
</table>

here's the code i tried to apply but it has applied each one of the classes the event:

$('.clickable1,.clickable2').toggle(function() {
            $(this).parent()
               .next('tr')
               .show();
        }, function() {
        $(this).parent()
               .next('tr')
               .hide();
        });

One more thing: i'm applying on each TR a css hover psuedo class. how can i make the two TRs to be highlighted (like hover effect on two of them) ?

Thanks in advanced!

:-Dan