テーブルの途中から折りたためるjquery

質問

テーブルの途中から折りたためるjqueryを探しています。

当方、java scriptはほぼ素人です。
かなり前に他サイトでみた動きを再現したいのですが、
探してみても見つからない為、質問させて頂きます。

イメージはテーブルで組まれた下記のような表があり
[すべて表示]のリンクを押すと非表示になっていた部分が表示される感じです。

■ 通常時

01　XXXX　YYYYYY
02　XXXX　YYYYYY
03　XXXX　YYYYYY
[すべて表示]

クリック時

01　XXXX　YYYYYY
02　XXXX　YYYYYY
03　XXXX　YYYYYY
04　XXXX　YYYYYY
05　XXXX　YYYYYY
06　XXXX　YYYYYY
[戻す]

このような動作をするjqueryでフリーの者があれば教えて頂けないでしょうか。

回答No.1

Proof4

jQueryを使わずとも、tableタグのclassを変えることで実現可能ではないでしょうか。
具体的には以下のテーブルに対して、（<th>の内容は簡略化します。）
【HTML】
<table id="sample" class="default">
<th>
01～～～
</th>
<th>
02～～～
</th>
<th class="openbtn">
開くボタン
</th>
<th class="hidden">
03～～～
</th>
<th class="hidden">
04～～～
</th>
<th class="closebtn">
閉じるボタン
</th>
</table>
以下のCSSでスタイルが設定されているとします。
【CSS】
table.default th.hidden{
display: none;
}
table.default th.closebtn{
display: none;
}
この状態の時、3,4行目と閉じるボタンが隠されています。Javascriptで、すべて表示するボタンを押した時に下記の動作をするようにします。
【JS】
var elem = document.getElementById('sample');
elem.className = "open";
これによって、idが"sample"のtableのclassがdefault→openに変わります。また、CSSに次の記述を追加します。
【CSS】
table.open th.hidden{
display: table-row-group;
}
table.open th.closebtn{
display: table-row-group;
}
table.open th.openbtn{
display: none;
}
これで、隠されている部分と閉じるボタンが表示され、開くボタンが隠されます。
戻すときは、同様にしてtableのclassをopen→defaultにします。

確証はありませんが、こんな感じでいかかでしょうか。