Question

I want to access the div tag in the following HTML code:

<table>
    <div class="rowBound">
      <tr onclick="expandLastResultDetails(this);">
        <td class="c1">56835-14513</td>
        ...
      </tr>
      <tr class="rowDetails">
        <td colspan="0">
        <div style="background-color: #0F9;"> expandable
         </div></td>
      </tr>
    </div>
</table>

But jQuery commands just give me a TBODY instead of my DIV ..

This is what I was doing in another case:

function expandNavContent(navEntryTitle) {
    var content = $(navEntryTitle).parent().children('.navContent');
    $(content).slideToggle('slow', function () {
        // Animation complete.
    });
}

What I want:
rowDetails should be animated with slideToggle if someone clicks on the tr

If I use this code:

function expandLastResultDetails(tableEntry) {
    var content =$(tableEntry).parent().children('.rowDetails');
    $(content).slideToggle('slow', function () {
        // Animation complete.
    });
}

It toggles ALL rows but it should just toggle ONE row so I nested them into a division, maybe that was wrong

Answer 1

Try this:

$('tr.rowDetails').find('div');

But, your Markup is not valid. tr is element of table, not for div.

To get the outer parent div:

$('tr.rowDetails').closest('div');

After edit

function expandLastResultDetails(tableEntry) {
    var content =$(tableEntry).next('.rowDetails'); // will point to next tr
    $(content).slideToggle('slow', function () {
        // Animation complete.
    });
}