How to show/hide specific table rows using jQuery - php

Question

I'm displaying some data in a table and for each row I have another one with some details that is hidden by default and I want to make it visible only when the user clicks a link.
HTML looks like this:
<div id="listing">
<?php for(): ?>
<tr>
<td>Toggle</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<tr class="details" style="display: none">
<td>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
<?php endfor; ?>
</div>
I tried using jQuery like so, but with no results:
$('#listing').on('click', '.toggle', function(e) {
e.preventDefault();
$(this).closest('tr .details').toggle();
});

Answer 1

On each first row element provide it a data-target this will be which class to target and toggle the show/hide.
So basically on click for toggle class we get the data-target use that value to find our target and then simply toggle the target.
JsFiddle : https://jsfiddle.net/63ujphmj/
Javascript
$(function()
{
$('.toggle').on('click', function()
{
var target = $(this).data('target');
$('.'+target).toggle();
});
});
Html
<div id="listing">
<table>
<tr>
<td>Toggle 1</td>
<td>Toggle 2</td>
<td>Toggle 3</td>
<td>Toggle 4</td>
</tr>
<tr class="details">
<td class="details-1" style="display: none">Toggle 1 details</td>
<td class="details-2" style="display: none">Toggle 2 details</td>
<td class="details-3" style="display: none">Toggle 3 details</td>
<td class="details-4" style="display: none">Toggle 4 details</td>
</tr>
</table>
</div>

Answer 2

Assuming you fix the invalid HTML and include <table> tags, you want to use:
$('#listing').on('click', '.toggle', function(e) {
e.preventDefault();
$(this).closest('tr').next('.details').toggle();
});
You need to use .closest('tr') to traverse up in the DOM from the button clicked to the parent row, then .next('.details') to move to the next row element.