本節書摘來自異步社群《html5開發手冊》一書中的第2章，第2.3節,作者： 【美】chuck hudson , 【英】tom leadbetter 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
在本書撰寫時，隻有chrome 13+支援新的details元素。但願其他浏覽器能盡快支援它。
利用details元素能夠在無需任何javascript和/或css的情況下，建立互動式展開/收縮的開關效果。在其中使用summary元素還可以建立内容的概述資訊。
details有一個可選屬性：open。若其為真，内容預設為展開樣式；反之則為收縮樣式，顯示summary内容。summary是一個可點選的部分，用以控制内容的展開與收縮。
圖2.3顯示了一個簡要的作者自傳，在預設情況下，頂上的details為展開狀态。詳細代碼見代碼2.3。
https://yqfile.alicdn.com/dac9a822cc9a69357ff3b801b597e12d468b0923.png" >
代碼2.3 details元素應用執行個體
https://yqfile.alicdn.com/1e0b137c85f4329fc0d35ee1682bd8e250592bfd.png" >
下面是另外一個利用details顯示、隐藏目錄的例子。根據頁面樣式和内容多少，将目錄始終顯示于頁面頂部是很有用的。使用者可以點選展開它，然後跳轉到頁面中的其他章節。代碼2.4示範了這種效果，其中details元素預設為收縮樣式。
代碼2.4 建立可伸縮的目錄
