HTML / Element

How to Use the details Element

The HTML details element is a native disclosure widget. It lets people open and close additional information or controls without JavaScript.

The answer first

Put a summary inside details as the label people operate. Put the information to reveal after it.

Add open when the content should start visible. Use another pattern when the content must always be visible, or when you are building tabs, menus, or dialogs.

Minimal example

<details>
  <summary>Show the explanation</summary>
  <p>This is the additional information.</p>
</details>

People can click or use the keyboard on summary to show or hide the content that follows.

Show a little more about HTML

details groups optional information. The summary remains visible when the section is closed.

Start open

Add the open attribute when the content should be visible when the page loads. Because open is a boolean attribute, open="false" is still open. Omit the attribute for the closed state.

<details open>
  <summary>This explanation starts open</summary>
  <p>This content is visible on the initial page load.</p>
</details>

Give summary a clear name

Write a summary that tells people what they will find after opening it. “Shipping and returns” is more helpful than a repeated “Read more” label.

Keep summary as the first child of details. Treat the label and the revealed content as two separate parts of the same disclosure.

Open one item at a time

Give several details elements the same name to make an exclusive group. Only one member of that group can be open at a time. If people should compare several sections at once, leave name out.

What is a disclosure widget?

It is a native HTML section that reveals additional information when requested.

Do I need JavaScript?

Not for the basic open-and-close behavior. Add JavaScript only when you need another action after the state changes.

Make it easy to read and use

Make the summary explain what will open.
Do not hide essential instructions or required actions inside a closed section.
Check that the section can be operated with the keyboard.
Check the meaning of the native disclosure indicator before replacing it with custom styling.
Use a pattern meant for tabs, menus, or dialogs when that is the actual purpose.

Common mistakes

Assuming open="false" closes the element. Boolean attributes use presence, not the text value.
Leaving out summary and expecting every browser to provide a useful label. Provide a meaningful label yourself.
Building a click-to-show section with CSS and a generic div. The native element already supplies important interaction behavior.

Check it in Atlas

For the content model, summary selection, open and toggle, exclusive name groups, browser behavior, and accessibility evidence, see details in Yugien Atlas.