สามารถนำไปประยุกต์ใช้ ในการซ่อนเนื้อหา ในตาราง และจะแสดง
เมื่อคลิกที่หัวข้อรายการนั้นๆ ดูตัวอย่าง พร้อมโค้ดด้านล่างประกอบ
ตัวอย่าง
| # | Topic |
| 1 | หัวข้อรายการที่ 1 |
| 2 | หัวข้อรายการที่ 2 |
| 3 | หัวข้อรายการที่ 3 |
| 4 | หัวข้อรายการที่ 4 |
| 5 | หัวข้อรายการที่ 5 |
โค้ดตัวอย่างทั้งหมด
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title></head><body><table width="500" border="0" align="center" cellpadding="0" cellspacing="2"> <tr> <td width="50" align="center" bgcolor="#FF99CC">#</td> <td height="20" bgcolor="#FF99CC">Topic</td> </tr><?phpfor($i=1;$i<=5;$i++){?> <tr bgcolor="#CCCC99" style="cursor:pointer;" onclick="$('#tr_toggle<?=$i?>').toggle();" > <td align="center" bgcolor="#EBEBD8"><?=$i?></td> <td height="20" bgcolor="#EBEBD8">หัวข้อรายการที่ <?=$i?></td> </tr> <tr style="display:none;" id="tr_toggle<?=$i?>"> <td height="20" colspan="2" align="left" bgcolor="#F8F8EF"> ข้อความที่ถูกซ่อน <?=$i?> </td> </tr> <?php } ?> </table></body></html> |
