CODEWITHSUNDEEP
javascriptjqueryhtml
user1745467
user1745467

Reputation: 67

jquery hide/show table / tr questions

I have a table where by each row will have links and there will be a hidden row underneath it which should be opened upon clicking the link 

<tr>
    <td>
      <a href="" class="link_1">03/09/3012</a>
    </td>
    <td>
    </td>
    <td>
        £66.36
    </td>
    <td>
        -£628.74
    </td>
</tr>
<tr style="display:none;" id="desc_1">
    <td colspan="4">
        Housing Benefit Direct
    </td>
</tr>

I am looking for the jquery so as any link with the class link_x will toggle the row desc_x

can anyone help please ?

Upvotes: 0

Views: 117

Answers (1)

Kevin Bowersox
Kevin Bowersox

Reputation: 94429

Remove the id portion of the class name in the markup:

<a href="" class="link">03/09/3012</a>

and

<tr style="display:none;" class="desc">

Then use this JS:

$(".link").click(function(e){
    e.preventDefault();
    $(this).parents("tr").next("tr").show();
});

JS Fiddle: http://jsfiddle.net/3RJJe/2/

Upvotes: 4

Related Questions