标签：
当先我们在日常的编程开发工作中使用编程工具（例如 Eclipse、Sublime 等等）都有相应的代码折叠展开功能，如下图所示，极大的方便了我们的编码工作。
同时，我们在日常的网页，尤其的广大的博客网站的源码展示部分，都采用了此种显示方式，如下图所示（示例引用位置：008-Selenium 操作下拉列表实例-Select）：
这么做的意义何在呢？我觉得其实际应用有如下两种：
那么该如何实现呢？下面就针对此进行简单的说明，实现此功能简单的步骤如下所示：
直接上码了，敬请各位小主参阅，若有不足之处，敬请大神指正，非常感谢！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>模拟IDE代码展开收起功能</title>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
</head>
<body>
<div id="popDiv" style="height:auto!important;height:20px;border:1px solid grey;" >
<label id="method" type="button" style="width:200px;" onclick="var sta = document.getElementById(‘popTitle‘); var mod = document.getElementById(‘method‘); if(sta.style.display == ‘none‘){sta.style.display=‘‘;mod.innerText=‘-‘;mod.innerHTML=‘-‘;}else{sta.style.display=‘none‘;mod.innerText=‘+‘;mod.innerHTML=‘+‘;};">+</label>
<div id="popTitle" visibility="hidden" style="display:none;">
<pre style="word-break:break-all;width:40px;height:200px;">
简单示例：模拟 IDE 的代码展开收起功能
在日常的网页开发过程中，有一些内容我们不想其在初始页面后就展示，而是选择将其像众多编程 IDE 工具一样，
收起相应内容，以将其他用户关注或感兴趣的部分，优先显示给用户。当用户需要查看相应的内容时，通过点击
展开或者收起按钮，即可查看隐藏相应的部分。
实际应用：
1、内容的隐藏和展开
2、自动化测试报告日志展示隐藏
</pre>
</div>
<div id="popForm"> <!-- 表单div -->
</div>
</div>
</body>
</html>
实际展示效果如下所示：
当然上述示例，与 IDE 或 cnblogs 中的展示隐藏效果相差甚远，感兴趣的小主们可自行研究，进而实现与 IDE 或 cnblogs 中等同的显示效果，再次不再做详细的说明。
至此， HTML-003-模拟IDE代码展开收起功能简单示例 顺利完结，希望此文能够给初学 HTML 的您一份参考。
最后，非常感谢亲的驻足，希望此文能对亲有所帮助。热烈欢迎亲一起探讨，共同进步。非常感谢！ ^_^
标签：
原文地址：http://www.cnblogs.com/fengpingfan/p/4729332.html
