你知道嗎，有一個原生的 HTML5 解決方案可以很容易地創建一個手風琴閱讀更多/更少按鈕來隱藏和顯示內容 沒有 JavaScript 或 CSS。 閱讀，了解如何。
HTML5 標籤正式成為 披露小部件元素的，但 配對 HTML5 標籤會給你一個 純 HTML-only 手風琴.
意思 沒有 JS 或 CSS 是需要的。 多麼酷啊！
這是一個示例，顯示了一個簡單的元素 .
這是代碼：
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>這是它的樣子：
了解更多
這是一個用於隱藏和顯示內容的原生 HTML5 手風琴。 很酷，對吧？
它如何運作？ 標籤用作可以打開或關閉的元素的包裝器。 用戶必須點擊標籤 標籤來打開或關閉元素。
樣式和行為呢？
樣式
您可以應用 CSS 樣式來自定義顯示文本框的外觀。 下面給出了一個選項卡式界面樣式：
details {
font: 16px "Open Sans", Calibri, sans-serif;
width: 620px;
}
details > summary {
padding: 2px 6px;
width: 15em;
background-color: #ddd;
border: none;
box-shadow: 3px 3px 4px black;
cursor: pointer;
}
details > p {
border-radius: 0 0 10px 10px;
background-color: #ddd;
padding: 2px 6px;
margin: 0;
box-shadow: 3px 3px 4px black;
}
details[open] > summary {
background-color: #ccf;
}默認情況下，光標顯示為箭頭，但如果您希望它是 指手 而是使用這個：
details {
cursor: pointer;
}行為
設置行為是非常有限的，你真的只能做一件事，那就是讓顯示的文本 默認打開.
要在打開狀態下啟動手風琴，請添加布爾值 打開 歸因於 標籤：
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>了解更多
這是一個用於隱藏和顯示內容的原生 HTML5 手風琴。 很酷，對吧？
我可以使用哪些屬性？
以下屬性可用於 標籤：
| 屬性 | 值 | 總結 |
|---|---|---|
| 打開 | 打開 | 默認是 沒開. |
| id | 值 | 提供唯一標識符。 |
| 類 | 類名 | 為元素分配類名。 |
| 樣式 | CSS 值 | 將 CSS 樣式分配給元素。 |
那麼有什麼限制呢？ 總有一個陷阱，不是嗎？
不支持 Internet Explorer
這個僅限 HTML5 的手風琴不適用於任何版本的 Internet Explorer。 如果你必須讓它支持 IE11，你將不得不使用 JQuery 使用不同的後備解決方案。 所有其他瀏覽器都支持 .
沒有自定義動畫或過渡
雖然您可以修改外觀並設置樣式（如上所示），但您將無法執行任何文本顯示動畫或過渡。 如果你想這樣做，你將需要另一個 CSS/JSS 手風琴解決方案。
屏幕閱讀器和可訪問性
這是原生的 HTML5 它*應該*可訪問，但發現實際顯示的文本並不總是由屏幕閱讀器正確宣布。
參考文獻：
