Lesson 27 / 30

Interactive Elements: details & dialog

Add accordions with details and summary and modals with the dialog element, no JavaScript framework required.

details and summary

<details> creates a built-in expandable section, and <summary> is its clickable heading.

<details>
  <summary>What is HTML?</summary>
  <p>HTML structures web pages.</p>
</details>

The dialog element

<dialog> with showModal() gives an accessible modal with focus handling and an Esc key to close.

<dialog id="dlg">
  <p>Delete this item?</p>
  <form method="dialog"><button>Cancel</button><button value="ok">Delete</button></form>
</dialog>
<button onclick="dlg.showModal()">Open</button>

Prefer these built-in elements to custom div-based widgets: they come with keyboard and screen reader support for free.