最初に
テーブル要素の特定行までは初期表示、以降は初期は非表示とし、ボタン押下で表示・非表示を切り替えるといった要件があったので、考えた結果をメモしておく。
今回はテーブル要素でやっているが、恐らく別の要素にも適用可能と思う。
＃他にやり方はあるんだと思いますが、与えられた環境等等の制限の中で考えた結果として受け止めて頂ければ幸い。。
まずは
まず、対象の要素（ここではテーブル要素）を囲むDiv要素を用意、このDivにposition:relativeを適用しておく。
ロード完了後（window.onload等、テーブルを描画後）にテーブル全体の高さを保持しておく。（フィールド変数なりなんなりで）
保持後、対象の要素にheight:特定の高さ、overflow-y:hiddenを適用する。（position:relativeと併せてクラス化しておき、クラス適用するのがよい）
これで初期表示で特定の高さまで表示し、以降を非表示の状態にできた。
続いて
あとはボタンにonclick時の挙動を設定する。
テーブルに非表示の領域がある場合（判定方法は色々と考えられるので各位好きな方法で）、表示処理としてjQueryのanimate()を使う。
animate()は第一引数に指定したスタイルに第二引数に指定した時間（ミリ秒）をかけて変化させるもの。
スタイルとしてheight:保持したテーブル全体の高さを指定することで、全体を表示できる。
また、非表示の際はheight:特定の高さに戻してあげる。
ここで、高さの指定を%指定で100%にすれば元の高さに戻せるのでは？と思うかもしれない。
animate()は何故か%指定するとアニメーションなしで100%の高さになる。。。
このため、テーブルの全体の高さを保持する必要がある。
コード
実際のコードを以下に示す。
また、動作するサンプルをcodepenに作成したので、最後のURLを参照。
<div id="toggle">
<table>
<thead>
<tr>
<th>行数</th>
<th>項目１</th>
<th>項目２</th>
<th>項目３</th>
</tr>
</thead>
<tbody>
<tr>
<td>１</td>
<td>値１</td>
<td>値２</td>
<td>値３</td>
</tr>
<tr>
<td>２</td>
<td>値１</td>
<td>値２</td>
<td>値３</td>
</tr>
<tr>
<td>３</td>
<td>値１</td>
<td>値２</td>
<td>値３</td>
</tr>
<tr>
<td>４</td>
<td>値１</td>
<td>値２</td>
<td>値３</td>
</tr>
<tr>
<td>５</td>
<td>値１</td>
<td>値２</td>
<td>値３</td>
</tr>
<tr>
<td>６</td>
<td>値１</td>
<td>値２</td>
<td>値３</td>
</tr>
<tr>
<td>７</td>
<td>値１</td>
<td>値２</td>
<td>値３</td>
</tr>
<tr>
<td>８</td>
<td>値１</td>
<td>値２</td>
<td>値３</td>
</tr>
<tr>
<td>９</td>
<td>値１</td>
<td>値２</td>
<td>値３</td>
</tr>
<tr>
<td>１０</td>
<td>値１</td>
<td>値２</td>
<td>値３</td>
</tr>
</tbody>
</div>
<div>
<button>表示</button>
</div>
div {
position:relative;
}
table td, table th {
border-style: solid;
}
th {
background-color: #FAB
}
button {
position: relative;
}
div#toggle.toggle {
position:relative;
height: 230px;
overflow-y: hidden;
}
let origin_height = 0;
$(window).on("load",function(){
origin_height = $("div#toggle").height();
$("div#toggle").addClass("toggle");
$("button").on("click", function(){
if (origin_height > $("div#toggle").height()) {
$("div#toggle").animate({height:origin_height}, 500);
$(this).text("非表示");
} else {
$("div#toggle").animate({height:"230"}, 500);
$(this).text("表示");
}
});
});