HTML detailsタグのアコーディオンメニュー

<details>
  <summary>toggle</summary>
  <div>Hello world!</div>
</details>

details > summary,
details > div {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  padding: 10px;
  border: 1px solid #000;
}
details summary::-webkit-details-marker {
  display:none;
}
details > div {
  cursor: auto;
  border-top: 0;
}

元記事を表示する