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.

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.

• javascript
• jquery
• html

6 Answers 6

Try this

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

DEMO.

here is what the js needs to be

$('.test').hide();
$('.showinfo').click(function(){
    $('.test',$(this).parent()).toggle();    
});​

you can see the demo here

Use jQuery next

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

it will find the next element matching the selector.

Use this:

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

Also set the .test with display:none; from the css.

jsFiddle: http://jsfiddle/3Wdp2/18/

Your following line is invalid:

<a class="showinfo" href="#"><b>ID:12</b>Click me<b></a>

Remove the extra <b> tag.

$(".showinfo").click( function()
{
    // The TD above the link
    var parent = $(this).parent();

    // The TD child that is a div
    $(parent).children("div").toggle();
});​

First you need to close your elements, this:

<a class="showinfo" href="#"><b>ID:12</b>Click me<b></a>

should probably just be

<a class="showinfo" href="#"><b>ID:12</b>Click me</a>

Otherwise there will be an open <b> element, and you can't close the <a> element inside another open element etc.

Then just target the sibling elements and filter by class:

$('.showinfo').on('click', function(e){
  e.preventDefault();
  $(this).siblings('.test').toggle();    
});

You should also prevent the default action of the <a> element to avoid scroling to the top.

If the code works like it is in the example, and hides both elements, there's no need to delegate the event, but on dynamic elements that does not exist when the handler is bound you will need to delegate the event to the closest non dynamic element, I'll use the document as an example:

$(document).on('click', '.showinfo', function(e){...});

FIDDLE