Section 30: Details, Summary, Dialog and Popover

Learning Objectives

Create expandable content with details and summary.
Understand the dialog element.
Use the native popover feature.
Know when native HTML interactions reduce the need for JavaScript.

1. The details Element

details creates a disclosure widget that users can open or close.

<details>
  <summary>What is HTML?</summary>
  <p>HTML is the standard markup language for structuring web content.</p>
</details>

2. Open by Default

<details open>
  <summary>Course requirements</summary>
  <p>No previous HTML experience is required.</p>
</details>

The open attribute makes the disclosure initially expanded. Browsers provide the basic disclosure interaction.

3. Grouping Disclosure Widgets

<details name="faq">
  <summary>Question One</summary>
  <p>Answer one.</p>
</details>

<details name="faq">
  <summary>Question Two</summary>
  <p>Answer two.</p>
</details>

In supporting modern browsers, details elements with the same non-empty name behave as a group in which opening one closes another. Test browser support for the target audience.

4. The dialog Element

dialog represents a dialog box. It can be shown non-modally or opened modally using JavaScript. A modal dialog prevents normal interaction with the rest of the document while it is open.

<dialog id="welcome-dialog">
  <h2>Welcome</h2>
  <p>Thanks for visiting Codementrix.</p>
  <form method="dialog">
    <button type="submit">Close</button>
  </form>
</dialog>

<button type="button" id="open-dialog">Open Dialog</button>

<script>
  const dialog = document.querySelector("#welcome-dialog");
  const openButton = document.querySelector("#open-dialog");

  openButton.addEventListener("click", () => {
    dialog.showModal();
  });
</script>

The showModal() method opens the dialog modally. The method close() can close it from JavaScript. A form with method="dialog" can close the dialog and set its return value.

5. The Popover API

The popover attribute allows an element to be displayed as a popover when triggered. Basic popovers can use HTML without custom JavaScript.

<button type="button" popovertarget="help-popover">
  Show Help
</button>

<div id="help-popover" popover>
  <p>This is a help popover.</p>
</div>

For a basic auto popover, the browser manages showing and dismissing it. More advanced popover behavior may need additional scripting.

6. Auto vs Manual Popovers

<div id="auto-popover" popover>
  <p>An automatic popover.</p>
</div>

<div id="manual-popover" popover="manual">
  <p>A manual popover.</p>
</div>

An auto popover participates in the browser's light-dismiss and popover stacking behavior. A manual popover does not automatically light-dismiss in the same way and typically requires an explicit close action or JavaScript.

Interactive HTML Elements