Details & Summary

Interactive Elements

Disclosure widget that can show or hide content.

Live Example

Click to expand

This is the hidden content that appears when the summary is clicked.

HTML Code

HTML

<details>
  <summary>Click to expand</summary>
  <p>This is the hidden content that appears when the summary is clicked.</p>
</details>

Usage Notes

This element renders as shown above in your current browser. Different browsers and operating systems may display slight variations in appearance and behavior.

The code example above shows the basic HTML structure. You can copy it directly into your projects or use it as a reference for creating similar components.