实现折叠效果的JavaScript代码
JavaScript可以实现丰富的网页显示效果，为了在Redmine中实现代码折叠，我在网上找了很久，最后终于发现一段JavaScript代码，可以作出折叠效果，实现起来也很简单，代码如下所示：
<!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 style="background-color:Blue;color:White;font-weight:bold;padding:10px;cursor:pointer"
onclick="toggle('divContent1')">Click Here</div>
<div id="divContent1" style="border:3px solid blue;height:100px;padding:10px">
This is some content to show and hide.
</div>
<br />
<div style="background-color:Blue;color:White;font-weight:bold;padding:10px;cursor:pointer"
onclick="toggle('divContent2')">Click Here</div>
<div id="divContent2" style="border:3px solid blue;height:100px;padding:10px">
This is some content to show and hide.
</div>
</body>
</html>
这段代码利用了CSS的display特性，display的特性值有：none和block。none即为隐藏，block为显示。
显示区域分为两个区域：标题栏和内容区域。标题栏总是可见的，内容部分可以折叠或展开。在页面上，可以使用两个<div>元素分别实现这个设计。最后的显示效果如下图所示：
压缩时：
展开时：
应该说，JavaScript实现这样的效果是比较简单的，对应到Redmine要达到的效果，就是把代码分成两部分，分别用不同的<div>分开。一部分是两个版本代码不同的地方，固定显示，另一部分是两个版本代码相同的部分，由一个按钮控制，按下和松开分别对应显示和不显示。
现在Redmine的实现是直接不显示相同的部分，看源代码没有发现它是怎么省略不需要的部分的，要把这段JavaScript程序整合进Redmine还要进一步研究一下。
