Question

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) ?

Here’s what I’ve found to be working perfectly so far:

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

It seems that the TR remembers it’s previous state by the toggle command!

Answer 1

thanks for all the answers guys!
here’s what i’ve found to be working perfectly so far:

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