javascript - Show / Hide colspan a specific row at the click of a button -

i have problem, need show / hide colspan of each column when link clicked.

that say, have many records, , when click on specific, need show information on colspan, when record clicked hide record clicked.

my html code:

<table class="table table-condensed table-bordered table-hover text-center">      <thead>         <tr>             <th>#</th>             <th>name</th>             <th>price</th>             <th>date</th>             <th>details</th>         </tr>     </thead>      <tbody>          <?php foreach ($products $row): ?>             <tr>                 <td>1</td>                 <td>product 1</td>                 <td>10000</td>                 <td>date</td>                 <td><a href="#" class="show" id="1">show details</a></td>             </tr>             <tr>                 <td>2</td>                 <td>product 2</td>                 <td>100</td>                 <td>date</td>                 <td><a href="#" class="show" id="2">show details</a></td>             </tr>             <tr>                 <td colspan="5">details of selected product</td>             </tr>         <?php endforeach; ?>     <tbody> </table> 

i had code, brought me first record:

$('.show').click(function(){     $(this).parent().parent().next().toggle('slow');     var id = $(this).attr('id');     $('td #colspanid').append(id); //show id     return false; }); 

if want specific row toggle can use eq

jquery(document).ready(function($){     $('.show').on('click', function(e){          e.preventdefault();          // put row index in eq          $('.table tr').eq(2).toggle();     }) }) 

or if want toggle next tr check jsfiddle i've created.

hope helps you.