很多网页都需要有这样的特性：某些内容可以进行收缩和展开。当然，是希望在客户端用脚本的方式来实现的。
点击“隐藏”按钮之后，我们希望第一个部分的内容隐藏起来，同时按钮的文本也要改变。
我们一般会这样做
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态收缩和展开的页面</title>
<script type="text/javascript" language="javascript">
function Toggle()
{
if(div1.style.visibility=='hidden')
{
div1.style.visibility='visible';
f1.style.height=div1.offsetHeight+'px';
bt1.value="隐藏";
}
else
{
div1.style.visibility='hidden';
f1.style.height='10px';
bt1.value='展开';
}
}
</script>
</head>
<body>
<input id="bt1" type="button" onclick="Toggle()" value="隐藏" />
<fieldset id="f1">
<div id="div1" style="visibility:visible">
这是第一部分的内容
<br /><br /><br /><br /><br /><br /><br />
</div>
</fieldset>
<br />
<fieldset>
<div id="div2">
这是第二部分的内容
</div>
</fieldset>
</body>
</html>
这里，可能大家很感兴趣的是那些脚本代码。但我要说，那其实很简单。但你可能在测试的时候，发现代码不能起作用。那是因为这个页面必须有第一句声明。【这是必须的】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果要在XSLT中加入这个文档声明，则大致如下
<xsl:output method="html" indent="yes" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>