Question

just having a little issue figuring this jquery problem out. I have a table with some numbers show on each row. I want it to so that when I click on the number which is a href link it toggles the div called “test” which is initially hidden. Currently with my code when I click one row with the number, all rows toggle since they share the same class name. How do I solve this issue so that only the row that is clicked toggles instead?

Some additional information the table and content is dynamically generated.

My HTML

<table>
 <tr>
  <td>
    <a class="showinfo" href="#"><b>ID:12</b>Click me<b></a>
    <div class="test">Test</div>
  </td>
 </tr>
 <tr>
  <td>
    <a class="showinfo" href="#"><b>ID:46</b>Click me<b></a>
    <div class="test">Test</div>
  </td>
 </tr>
</table>

My JS is as follows

$('.test').hide();
$('.showinfo').click(function(){
    $('.test').toggle();    
});

Thank you.

Answer 1

Try this

$('.showinfo').click(function(e){
    e.preventDefault();
    $(this).closest('td').find(".test").toggle();
});

DEMO.