Query multiple SlideIn functions based on row number - php

Question

I am looking for information on the best approach to creating a 'more details' section on a table generated by a MySQL query which is something like this:
<tr>
<th>First Name</th>
<th>Surname</td>
<th>Details</th>
</tr>
<tr>
<td>Joe</td>
<td>Blogs</td>
<td><a class="button-1" href="">More Details</td>
</tr>
<tr>
<th class="hidden_details hidden-1" colspan="3">...insert details...</th>
</tr>
Each row has a unique id e.g. button-2,3,4 etc that I can use to create a unique class for each details section and I can hide and show the details using JQuery:
$(document).ready(function() {
$('.button-1').click(function(){
var link = $(this);
$('.hidden-1').slideToggle('slow', function() {
if ($(this).is(':visible')) {
link.text('Hide Details');
} else {
link.text('More Details');
}
});
});
});
But my knowledge on JQuery is limited so the only way I could think to call the code would be to use php to create multiple versions. If anyone could point my in the direction of the best approach I would be grateful

Answer 1

check this code. it will help you. here id="view_1",id="show_1" 1 is your dynamic value from database .
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>First Name</th>
<th>Surname</td>
<th>Details</th>
</tr>
<tr>
<td>Joe</td>
<td>Blogs</td>
<td><a class="button-1" id="view_1" href="javascript:void(0)" onclick="show_details(1)">More Details</td>
</tr>
<tr>
<th class="hidden_details hidden-1" colspan="3" id="show_1">...insert details...</th>
</tr>
<tr>
<td>Joe1</td>
<td>Blogs2</td>
<td><a class="button-1" id="view_2" href="javascript:void(0)" onclick="show_details(2)">More Details</td>
</tr>
<tr>
<th class="hidden_details hidden-1" colspan="3" id="show_2">...insert details...</th>
</tr>
</table>
<script type="text/javascript">
function show_details(id) {
if ($('#show_'+id).is(':visible')) {
$('#view_'+id).text('More Details');
$('#show_'+id).hide();
} else {
$('#view_'+id).text('Hide Details');
$('#show_'+id).show();
}
}
</script>
<style type="text/css">
.hidden_details {
display: none;
}
</style>