<div class="show">
		<div class="demo">
			<details>
				<summary>这是摘要1</summary>
				<p>这里具体描述,标签相对随意,例如这里使用的&lt;p&gt;标签。</p>
			</details>

			<details>
				<summary>这是摘要2</summary>
				<content>这里&lt;details&gt;标签设置了HTML布尔属性open,因此,默认是展开状态。</content>
			</details>

			<details>
				<p>如果&lt;summary&gt;缺省,则会自动补上,文案是“详细信息”。</p>
			</details>
		</div>
	</div>
body {
  display: flex;
  justify-content: center;
  padding: 2vw;
}
.show{
  padding-bottom:20px;
  min-width: 50vw;
}
.show h5{
  font-size:13px; 
  line-height:20px; 
  padding:10px 0 2px 2px; 
  margin:0 0 0 8px;
}
.demo{
  padding:10px;
}
details {
  margin: 1rem 0;
}
details:active,
details:focus,
summary:active,
summary:focus{
  outline: none 0;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.