Toggle clicked row only, with checkboxes using JQuery

Question

Hello would someone help me out here?

I am trying to to do the following :

<table>
<thead> 
    <tr> 
        <th>Select</th> 
        <th>Name</th> 
    </tr>
</thead>    
<tr>
    <td>
        <input type="checkbox" class="toggle">
    </td>
    <td>
        Sam, Walls
    </td>
</tr>
<tr class="show">
    <td colspan="2">
        This is the info about Sam.
    </td>
</tr>
<tr>
    <td>
        <input type="checkbox" class="toggle">
    </td>
    <td>
        John, Doe
    </td>
</tr>
<tr class="show">
    <td colspan="2">
        This is the info about John.
    </td>
</tr>
</table>

When the checkbox with class="toggle" is clicked I only want the row below it to appear.

My JavaScript code that does not work so well is as follows:

$('.show').hide();
$('.toggle').click(function(){
    $('.show').slideToggle();
});

Currently it will only hide and toggle the Sam, Walls row.

EDIT : After using class instead of ID the hide issue seems to have been solved. Now however when I click one check box, both rows are toggled together. I updated the code above.

Any help would be appreciated!

Cheers.

You can't have two items with the same ID. Change it to a class `.toggle' — Ben Felda
– Ben Felda, Commented Feb 13, 2013 at 20:56
well that solved the hide issue. Now however both rows are toggled. — BaconJuice
– BaconJuice, Commented Feb 13, 2013 at 20:59

Ben Felda · Accepted Answer · 2013-02-13 21:07:10Z

2

I mentioned in a comment that you cannot have duplicate id's, and that also goes for your #show element. Use the next function instead so whatever item you press, the next element will toggle. Something like:

$('.show').hide();
$('.toggle').click(function(){
    $(this).closest('tr').next().slideToggle();
});

edited Feb 13, 2013 at 21:07

answered Feb 13, 2013 at 20:59

Ben Felda

1,48210 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BaconJuice Over a year ago

should be $(this).closest('tr').next().slideToggle(); and this fixed it, Thank you!

Mark Schultheiss · Accepted Answer · 2013-02-13 21:11:38Z

1

You can use your classes and toggle using the index of the one clicked...

$('.show').hide();
$('.toggle').click(function(){
    $('.show').eq($('.toggle').index(this)).slideToggle();
});

answered Feb 13, 2013 at 21:11

Mark Schultheiss

34.3k13 gold badges75 silver badges117 bronze badges

Collectives™ on Stack Overflow

Toggle clicked row only, with checkboxes using JQuery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related