<details> 可以選擇展開內容或者關閉,
預設是標題會有個向右的三角形箭頭,
只要點三角箭頭就能隨意打開、關閉隱藏的內容,
而且只需要用到兩個標籤,不必 javascript 控制,
目前 IE 、 Firefox不支援。
以下為使用方式 :
<details>
<summary>Copyright 1999-2014.</summary>
<p> - by Refsnes Data. All Rights Reserved.</p>
<p>All content and graphics on this web site are the property of the company Refsnes Data.</p>
</details>
<summary> 為標題的標籤,剛開始只會顯示 <summary> 裡的內容。
<p> 為要隱藏的內容,可以有數個段落。
<dialog> 跟 <details> 相似,但 <dialog> 並不能從瀏覽器操縱開闔,
預設是隱藏,加了 open 屬性才會顯現,會出現在有設此標籤的元素旁,有點類似對話框,
會自動加上黑色邊框,並將文字置中對齊,不過這標籤的屬性很少,
只是方便不用寫 CSS,就可產生個具邊框的對話文字,
目前只有 Chrome 跟 Safari 支援。
使用方式 :
<dialog open>This is an open dialog window</dialog>