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.

7. Accessibility Considerations

• Use a meaningful summary for details.
• Give dialog content a clear heading and accessible name where appropriate.
• Provide a clear way to close dialogs.
• Check focus behavior, keyboard navigation and screen-reader announcements.
• Test browser support for popover features.

Common Mistakes

• Using summary outside a details element for its disclosure behavior.
• Assuming dialog opens automatically without calling a suitable method or setting open.
• Using a popover without a meaningful trigger or dismissal behavior.
• Building a custom disclosure when native details would be sufficient.

Practice Exercises

1. Create a three-question FAQ using details and summary.
2. Create a dialog with a heading, message and close button.
3. Create a help popover triggered by a button.
4. Explain the difference between a modal dialog and a basic popover.

Revision Quiz

1. Which element creates a native disclosure widget?
2. Which element provides its visible disclosure label?
3. Which method opens a dialog modally?
4. Which form method can close a dialog and set its return value?
5. Which attribute creates a popover?
6. Does every native disclosure widget require JavaScript?

Answer Key and Explanations

1. details — It creates expandable content.
2. summary — It supplies the disclosure label.
3. showModal() — It opens a modal dialog.
4. method="dialog" — Submitting that form closes the dialog and sets its return value.
5. popover — It enables the popover feature.
6. No. details and basic popovers have native interaction behavior.