Key to the implementation of the technology: using the display feature of CSS, the display feature values are: None and block. None is hidden; The block is displayed.
Pre-hands-on design: Collapsible areas are divided into two areas: the title bar and the content area. The title bar is always visible and the contents can be folded or expanded. On the page, you can use two <div> elements to implement this design separately.
Implementation steps:
Insert the <div> element in the page and add the JS code to implement the folding function, the code is as follows:
<textarea id="runcode90510"><! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <title></title> <script type=" Te Xt/javascript "> Function Toggle (sdivid) {var odiv = document.getElementById (Sdivid); ODiv.style.display = (ODiv.style.display = = "None")? "Block": "None"; } </script> </pead> <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= "divco Ntent2 "> This are some content to show and hide. </div> </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The effect of the code implementation is as follows:
