<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Action</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td><a href="#" id="example-show" onclick="showHide('example');return false;" class="showLink btn bN-btn-base bN-btn-small">View More</a></td>
</tr>
<tr>
<td colspan="3">
<div id="example" class="more">
<p>John Doe is a man</p>
<p style="text-align:right;"><a href="#" id="example-hide" class="hideLink" onclick="showHide('example');return false;">Hide this content.</a></p>
</div>
</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td><a href="#" id="example-show" onclick="showHide('exampleFemale');return false;" class=" showLink btn bN-btn-base bN-btn-small">View More</a></td><!-- Note the change in the showHide() function -->
</tr>
<tr>
<td colspan="3">
<div id="exampleFemale" class="more"><!-- Note the change in the ID -->
<p>Jane Doe is a woman</p>
<p style="text-align:right;"><a href="#" id="example-hide" class="hideLink" onclick="showHide('exampleFemale');return false;">Hide this content.</a></p><!-- Note the change in the showHide() function -->
</div>
</td>
</tr>
</table>
