HTML details, summary and dialog: Interactive Elements Without JavaScript

Some common interface patterns are built into HTML. They work with the keyboard, are announced correctly by screen readers, and need little or no JavaScript.

details and summary: show and hide#

<details>
  <summary>What is HTML?</summary>
  <p>HTML is the language that describes the structure of web pages.</p>
</details>

<details open>
  <summary>Is this course free?</summary>
  <p>Yes, every lesson is free.</p>
</details>

• <summary> is the always-visible heading. Clicking it (or pressing Enter or Space when it is focused) toggles the rest.
• The open attribute makes it start expanded. The browser adds and removes open as the user toggles.
• Everything in <details> other than the <summary> is hidden while closed.

The Hint and Solution boxes in this course's exercises are <details> elements.

Exclusive accordions#

Give several <details> elements the same name and only one can be open at a time. Opening one closes the others:

<details name="faq">
  <summary>Shipping</summary>
  <p>Orders arrive in 2 to 4 days.</p>
</details>
<details name="faq">
  <summary>Returns</summary>
  <p>Return any item within 7 days.</p>
</details>
<details name="faq">
  <summary>Payment</summary>
  <p>We accept UPI and cards.</p>
</details>

This attribute is supported in current versions of Chrome, Edge, Firefox and Safari. In older browsers, the elements simply work independently.

dialog: pop-up windows#

<dialog> creates a dialog box. It needs a little JavaScript to open:

<button type="button" id="open-btn">Delete account</button>

<dialog id="confirm">
  <h2>Delete your account?</h2>
  <p>This cannot be undone.</p>
  <form method="dialog">
    <button value="cancel">Cancel</button>
    <button value="delete">Delete</button>
  </form>
</dialog>

<p id="choice"></p>

const dialog = document.getElementById("confirm");
document.getElementById("open-btn").addEventListener("click", () => dialog.showModal());
dialog.addEventListener("close", () => {
  document.getElementById("choice").textContent = "You chose: " + dialog.returnValue;
});

What the browser does for you:

• showModal() opens it as a modal: the rest of the page cannot be clicked, and keyboard focus moves into the dialog.
• Esc closes it.
• A <form method="dialog"> inside closes the dialog when submitted, without sending anything anywhere. The clicked button's value becomes dialog.returnValue.
• The ::backdrop CSS pseudo-element styles the dimmed area behind a modal.

show() opens a non-modal dialog that does not block the page, and close() closes it from JavaScript.

Before <dialog>, developers had to build all of this themselves, including the focus handling. It is still worth testing your dialogs with a keyboard and screen reader.

The popover attribute#

For lighter pop-ups such as menus and tooltips, the popover attribute shows and hides an element with no JavaScript at all:

<button type="button" popovertarget="tips">Show tips</button>
<div id="tips" popover>
  <p>Press Esc or click outside to close me.</p>
</div>

Popovers appear on top of everything, and close when the user presses Esc or clicks elsewhere. The popover attribute is available in current versions of all major browsers.

Practice#

<details name="course-faq" open>
  <summary>How long is the course?</summary>
  <p>About 46 lessons; most people finish in four to six weeks.</p>
</details>
<details name="course-faq">
  <summary>How much does it cost?</summary>
  <p>Nothing. Every lesson is free.</p>
</details>
<details name="course-faq">
  <summary>Do I need any experience?</summary>
  <p>No. The course starts from the very beginning.</p>
</details>

Key takeaway#