tableの行をクリックすると下部に詳細が表示される

Result

jQuery

//参照元に準拠し、onclick処理はtable内に書いてます
function show_hide_row(row)
{$("#"+row).toggle();}

css

#table_detail tr:hover{
 background-color:#ddd;
 cursor:pointer;
}
#table_detail .hidden_row{
 display:none;
}

html

<table border=1 id="table_detail" align=center cellpadding=10>

<tr>
<th>名前</th>
<th>年齢</th>
<th>給料</th>
<th>仕事</th>
</tr>

<tr onclick="show_hide_row('hidden_row1');"><td>たける</td><td>25</td><td>9万</td><td>フリーター</td></tr>
<tr id="hidden_row1" class="hidden_row">
<td colspan=4>たける、25歳。会社員を目指すが現在はフリーターとしてアルバイトを2～3社で。月の給料は総額9万ほど。</td>
</tr>

<tr onclick="show_hide_row('hidden_row2');"><td>まさみ</td><td>29</td><td>40万</td><td>Webデザイナー</td></tr>
<tr id="hidden_row2" class="hidden_row">
<td colspan=4>まさみ、29歳。Webデザイナーとして3年間勤務。腕もよく企業からの信頼も厚い。手取りで40万。</td>
</tr>

<tr onclick="show_hide_row('hidden_row3');"><td>あつし</td><td>32</td><td>120万</td><td>経営コンサルタント</td></tr>
<tr id="hidden_row3" class="hidden_row">
<td colspan=4>Atsushi is 32 years old and he is a management consultant he earns 1200000 per month</td>
</tr>


</table>

via

Expand Table Rows Using jQuery, HTML And CSS