本节书摘来自异步社区《HTML5开发手册》一书中的第2章，第2.3节,作者： 【美】Chuck Hudson , 【英】Tom Leadbetter 更多章节内容可以访问云栖社区“异步社区”公众号查看。
2.3 初学者“菜谱”：使用details元素创建可伸缩控件
在本书撰写时，只有Chrome 13+支持新的details元素。但愿其他浏览器能尽快支持它。
利用details元素能够在无需任何JavaScript和/或CSS的情况下，创建交互式展开/收缩的开关效果。在其中使用summary元素还可以创建内容的概述信息。
details有一个可选属性：open。若其为真，内容默认为展开样式；反之则为收缩样式，显示summary内容。Summary是一个可点击的部分，用以控制内容的展开与收缩。
图2.3显示了一个简要的作者自传，在默认情况下，顶上的details为展开状态。详细代码见代码2.3。
代码2.3 details元素应用实例
下面是另外一个利用details显示、隐藏目录的例子。根据页面样式和内容多少，将目录始终显示于页面顶部是很有用的。用户可以点击展开它，然后跳转到页面中的其他章节。代码2.4演示了这种效果，其中details元素默认为收缩样式。
代码2.4 创建可伸缩的目录