テーブル本体を隠しておいて、必要に応じて表示させる – jQuery

$(“.conditions”).children().each(function(){ if(!$(this).is(‘caption’)){
$(this).hide();
}
});

$(“.conditions > caption”).click( function(){
$(this).parent().children().each(function(){
if(!$(this).is(‘caption’)){
$(this).toggle();
}
});
});

　こんなコードを書いて

<table class=’conditions’ border=’3′>
<caption>条件グループ１</caption>
<tr><th>条件１</th><td>hoge</td></tr>
<tr><th>条件２</th><td>piyo</td></tr>
</table>

<table class=’conditions’ border=’3′>
<caption>条件グループ２</caption>
<tr><th>条件A</th><td>hoge</td></tr>
<tr><th>条件B</th><td>piyo</td></tr>
</table>

　みたいなテーブル郡を用意しておくと、初期状態ではキャプションだけ表示されていて、キャプションをクリックする度にテーブル本体が開いたり閉じたりする。
　設定画面が縦に長くなっちゃう時などに、あまり利用しない部分を隠しておくのに便利。
　captionタグにスタイルをつけてcursor:pointer; color:blue;あたりを設定しておくとわかりやすい。

(164)

Tweet