技術實現的關鍵：使用CSS的display特性，display特性的值有：none和block。none即為隱藏；block即為顯示。
動手之前的設計：可摺疊地區分為兩個地區：標題列和內容地區。標題列總是可見的，內容部分是可以摺疊或展開的。在頁面上，可以使用兩個<div>元素分別實現這個設計。
實現步驟：
在頁面中插入<div>元素，並加入實現摺疊功能的JS代碼，代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> <script type="text/javascript"> function toggle(sDivId) { var oDiv = document.getElementById(sDivId); oDiv.style.display = (oDiv.style.display == "none") ? "block" : "none"; } </script> </head> <body> <div onclick="toggle('divContent1')">Click Here</div> <div id="divContent1" > This is some content to show and hide. </div> <p> </p> <div onclick="toggle('divContent2')">Click Here</div> <div id="divContent2" > This is some content to show and hide. </div> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
代碼實現的效果，如下：
![]()
