Show hiden table on parent row click : I have rows but one row one row is hidden and I need to show them when I click on parent row link .btn-link ...

I have html:

    <tr>
       <td><a href="#" class="btn-link"> <i class="fa fa-plus-circle" aria-hidden="true"></i> Details
          </a>
       </td>
       <td> </td>
       <td><span class="text-muted"><i class="fa fa-clock-o"></i> 2017-01-04</span></td>
       <td>£46.00</td>
       <td class="text-center">
          <div class="label label-table label-success">Paid</div>
       </td>
    </tr>
    <tr class="showDetails">
       <td colspan="20">
          <table id="" class="table-responsive" cellspacing="0" width="100%">
             <thead>
                <tr>
                   <th>Name</th>
                   <th>Price</th>
                   <th>Recipient</th>
                   <th>Expiry</th>
                   <th>Status</th>
                </tr>
             </thead>
             <tbody>
                <tr>
                   <td class="col-lg-6">
                      <p class="detailCell">Three Course Italian Meal for Two with Prosecco at Michelin Recommended Mele e Pere, Soho</p>
                   </td>
                   <td>46.00</td>
                   <td>No recipient</td>
                   <td>Mar 11, 2017</td>
                   <td><span class="label label-warning">Paid</span></td>
                </tr>
             </tbody>
          </table>
       </td>
    </tr>


so when I click on 'details' - class="btn-link" I need to show the next row who has class "showDetails" and who is hidden:

so I write:

     $( ".btn-link" ).click(function() {
        $(this).closest('tr.showDetails').show();
    });

of cource:

    .showDetails {display:none;}

On click nothing happend. WHy my code wont work and please help me to solve this.

Also how to toggle on next click so on one click to open .showDetails row on next to hide that row...