Question

I need to display only the first two rows in a table, and on click on the div I need it to animate slideDown and show the full table. I could have just set display to none for all the table rows except the first two, but that will ruin the effect when I want to show them all…so instead I figured I should use overflow:hidden, and set a height on the div based on the height of the first two rows of the table…. Any ideas how to do this?

STRUCTURE:

<div>
  <table>
    <tr>
      <td>data</td>
    </tr>

    <tr>
      <td>data</td>
    </tr>

    <tr>
      <td>data</td>
    </tr>

    <tr>
      <td>data</td>
    </tr>

    <tr>
      <td>data</td>
    </tr>
  </table>
</div>

Answer 1

Use jQuery’s eq()

$('tr').eq(0).height();
$('tr').eq(1).height();

Where 0 represents the first td in the list