HTML Dialog, Details & Popover

Modern HTML has ready-made elements for things that used to need a lot of JavaScript: open-and-close sections, pop-up windows and small menus.

details and summary

<details> makes a section that opens and closes when clicked. <summary> is the always-visible heading. Everything else inside is hidden until the user opens it.

Example

html

<!DOCTYPE html>
<html>
<body>

<h2>Frequently Asked Questions</h2>

<details>
  <summary>Are classes online or at the institute?</summary>
  <p>Both. You can join online or come to our campus in Orangi Town, Karachi.</p>
</details>

<details open>
  <summary>Do I need a laptop?</summary>
  <p>A laptop helps for practice at home, but our lab has computers for every student.</p>
</details>

</body>
</html>

Try it Yourself »

The open attribute shows the second answer when the page loads. No JavaScript is needed, and it works with the keyboard too.

An Exclusive Accordion

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

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
  details { border: 1px solid #ccc; border-radius: 6px; padding: 8px 12px; margin-bottom: 6px; }
  summary { font-weight: bold; cursor: pointer; }
</style>
</head>
<body>

<details name="course" open>
  <summary>Week 1: HTML</summary>
  <p>Elements, links, images and forms.</p>
</details>
<details name="course">
  <summary>Week 2: CSS</summary>
  <p>Colours, fonts, Flexbox and Grid.</p>
</details>
<details name="course">
  <summary>Week 3: JavaScript</summary>
  <p>Variables, functions and events.</p>
</details>

</body>
</html>

Try it Yourself »

The dialog Element

<dialog> is a pop-up box. It is hidden until you open it with JavaScript.

Method	Result
`showModal()`	Opens it as a modal: the page behind is dimmed and cannot be clicked
`show()`	Opens it without blocking the page
`close()`	Closes it

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
  dialog { border: none; border-radius: 8px; padding: 20px; max-width: 300px; }
  dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
</style>
</head>
<body>

<button id="openBtn">Delete my account</button>
<p id="result"></p>

<dialog id="confirmBox">
  <p>Are you sure? This cannot be undone.</p>
  <form method="dialog">
    <button value="no">Cancel</button>
    <button value="yes">Yes, delete</button>
  </form>
</dialog>

<script>
const box = document.getElementById("confirmBox");
document.getElementById("openBtn").onclick = () => box.showModal();
box.onclose = () => {
  document.getElementById("result").innerHTML = "You chose: " + box.returnValue;
};
</script>

</body>
</html>

Try it Yourself »

How it works:

showModal() opens the dialog and dims the page with the ::backdrop.
A form with method="dialog" closes the dialog instead of sending data.
The value of the clicked button becomes box.returnValue.
Pressing Esc also closes it. The browser moves keyboard focus into the dialog and back again for you.

A modal <dialog> is much better for accessibility than a home-made pop-up from <div> tags, because the browser handles focus and the Esc key.

A popover is a small box that appears on top of the page, like a menu, a tip or a notice. Add the popover attribute to any element, and connect a button to it with popovertarget. No JavaScript at all.

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
  [popover] { border: 1px solid #ccc; border-radius: 8px; padding: 12px 16px; }
</style>
</head>
<body>

<button popovertarget="help">What is a CNIC?</button>

<div id="help" popover>
  <p>CNIC is the Computerised National Identity Card number, written like 42101-1234567-1.</p>
  <button popovertarget="help" popovertargetaction="hide">Close</button>
</div>

</body>
</html>

Try it Yourself »

Feature	Behaviour
`popover` (same as `popover="auto"`)	Closes when you click outside or press Esc. Opening one auto popover closes others
`popover="manual"`	Stays open until a button or script closes it
`popovertarget="id"`	The button toggles that popover
`popovertargetaction`	`show`, `hide` or `toggle` (the default)

Which One Should I Use?

You want	Use
FAQ answers, "read more" sections	`<details>` and `<summary>`
A question the user must answer before going on	`<dialog>` with `showModal()`
A menu, a tooltip-like tip, a small notice	`popover`

Exercise

Which element creates a clickable heading that shows and hides the content below it, with no JavaScript?

HTML Dialog, Details & Popover

details and summary

Example

An Exclusive Accordion

Example

The dialog Element

Example

The popover Attribute

Example

Which One Should I Use?

Exercise