Interactive Elements

Interactive Elements

A few special tags for showing/hiding and pop-up boxes: all built-in!

details and summary: an expandable box

<details> hides its content behind a little triangle. <summary> is the clickable title.

<details>
  <summary>Click to see the answer</summary>
  <p>42!</p>
</details>

Add open to start it expanded:

<details open>
  <summary>Already open</summary>
  <p>You can see me.</p>
</details>

dialog: a pop-up box

<dialog> makes a pop-up window. Use open to show it, or JavaScript's .showModal().

<dialog open>
  <h2>Welcome!</h2>
  <p>Thanks for visiting.</p>
</dialog>

popover

The popover attribute (a global attribute) turns an element into a little pop-up panel. It can be opened with a button:

<button popovertarget="tip">Hover for help</button>
<div id="tip" popover>Here's a helpful tip!</div>

TL;DR

• <details> + <summary> = built-in expand/collapse box.
• <dialog> = pop-up window.
• popover attribute + popovertarget button = pop-up panel.
• No JavaScript needed for the basics!