How do I use the details and summary html tags?

addaxnasom

The details and summary html tags are semantic elements. The details tag is used for open and close information on demand. The summary tag is a short description of what the details are.

<!DOCTYPE html>
<html>
<body>

<h1>Lorem Ipsum</h1>

<details>
  <summary>Find more details.</summary>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</details>

</body>
</html>

Clicking the summary shows the details.