Question

I am attempting to toggle() individual table rows. each row gets a serial number and is worked into the id of the row. When the more.png image is clicked the row is shown or hidden. this is only doing it for the first row. what am I missing?

$(function () {
function showdetail()
    {
    var id = $(this).attr('rel');
    $('#'+id).toggle();
    }
    $('#detail').click(showdetail);
});

This is clicked.

echo '<img src="more.png" id="detail" rel="details'.$serial.'" />';

This is shown or hidden.

echo '<tr id="details'.$serial.'"><td>stuff...</td><td>stuff...</td></tr>';

Answer 1

When the page loads, you bind a single function to a single element: the very first occurrence of the element with id=”detail”. You cannot have more than one element on a page with the same id.

replace this:

echo '<img src="more.png" id="detail" rel="details'.$serial.'" />';

with this:

echo '<img src="more.png" class="detail" rel="details'.$serial.'" />';

Then replace

$('#detail').click(showdetail);

with this:

$('.detail').click(showdetail);

Obviously, this is untested, so let me know if it works…