你知道吗，有一个原生的 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 它*应该*可访问，但发现实际显示的文本并不总是由屏幕阅读器正确宣布。
参考文献：
