I have written below code in PHP + Ajax
<table>
<tr><td data-id="1" onclick="showData(event);">ABC</td>
<tr style='display:none' data-fold='1'><td>ABC - 01</td>
<tr><td data-id="2" onclick="showData(event);">PQR</td>
<tr style='display:none' data-fold='2'><td>PQR- 01</td>
</table>
I need to show data-fold "tr" when someone click on data-id with respective id, that is when I click on data-id 1, then data-fold 1 should be visible.
Also, the content in data-fold is coming from AJAX..
Below is my AJAX code:
function showData(event){
var rowId = $(event.currentTarget).attr('data-id');
$.ajax({
type: "POST",
url: "ajax.php", //
data: 'type=viewOrder&rowId='+rowId,
success: function(msg){
$("tr").each(function(){
childId = $(this).attr('data-fold');
if(childId == rowId) {
$(this).toggle("slow");
$(this).html(msg);
}
});
},
error: function(){
alert("failure");
}
});
}
My code is working fine, but I need to close all other tr expect the one I clicked.