native HTML expand（本机HTML拓展）

示例

HTML

<div class="container">

<details>
    <summary>Life Story</summary>
  <div>Nothing special, I think you're pretty cool.</div>
</details>

<details>
    <summary>Contact Info</summary>
    <div><ul>
      <li>Twitter: <a href="https://twitter.com/tejaskumar_" target="_blank">@tejaskumar_</a></li>
      <li>GitHub: <a href="https://github.com/tejasq" target="_blank">tejasq</a></li>
      </ul></div>
</details>

<details>
  <summary>Future Career Options</summary>
  <div>
    <ul>
      <li>Chief Trolling Officer</li>
      <li>Hat Model</li>
    </ul>
  </div>
</details>

</div>

CSS

.container {
  max-width: 768px;
  margin: 100px auto;
  box-shadow: 0 3px 10px #0003;
  border-radius: 2p;
}

details > summary {
  padding: 8px 16px;
  font-weight: bold;
}

details > div {
  padding: 16px;
}

details > summary:hover {
  background: #f4f4f4;
}


details:not(:first-of-type) > summary {
  border-top: 1px solid #ddd;
}

ul {
  margin: 0;
  padding: 0;
  list-style-position: inside;
}

body {
  font-family: sans-serif;
}

更多有趣示例 尽在 小红砖社区https://xhz.bos.xyz