Runnable HTML Docs: Details and Summary

Q: How do I make a details element open by default?

Add the boolean open attribute: . The browser adds and removes that attribute as the user toggles it, so CSS can style details[open].

Q: How do I make an accordion where only one section is open?

Give every in the group the same name attribute, for example name="faq". Opening one closes the others in that group, with no JavaScript.

Q: How do I remove or change the arrow in a details summary?

Set list-style: none on summary and add summary::-webkit-details-marker { display: none; } for Safari. Then draw your own indicator, for example with summary::after, and change it with details[open] summary::after.

Q: Can I detect when a details element opens?

Yes. Listen for the toggle event on the element and read its open property. Setting details.open = true in JavaScript opens it.

Collapsible content with details and summary

Wrap content in <details> and put a <summary> first. The summary stays visible; everything else is hidden until the reader clicks it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>details</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <details>
    <summary>What is included in the free plan?</summary>
    <p>Five projects, community support and all the beginner courses.</p>
  </details>
</body>
</html>

Click the question to open it, and again to close it. The browser adds the triangle marker, makes the summary focusable, toggles it with Enter or Space, and tells screen readers whether it is expanded or collapsed. No JavaScript is involved.

If you leave out <summary>, the browser shows a default label ("Details" in English) instead.

Open by default

The boolean open attribute shows the content from the start. The browser adds and removes open as the reader toggles, so it is also the hook for styling:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>open</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    details { border: 2px solid #e5e7eb; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
    details[open] { border-color: #2563eb; }
    summary { cursor: pointer; font-weight: 600; }
  </style>
</head>
<body>
  <details open>
    <summary>Shipping</summary>
    <p>Orders ship within two working days.</p>
  </details>
  <details>
    <summary>Returns</summary>
    <p>Return any item within 30 days.</p>
  </details>
</body>
</html>

The open box has a blue border from details[open]. Open "Returns" and it turns blue too; both can be open at the same time.

Accordion: only one open at a time

Give several <details> elements the same name and they become an exclusive group: opening one closes the others. This used to take JavaScript and now works with the attribute alone in current Chrome, Edge, Firefox and Safari:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Accordion</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .faq { max-width: 420px; border: 1px solid #e5e7eb; border-radius: 10px; }
    .faq details + details { border-top: 1px solid #e5e7eb; }
    .faq summary { padding: 12px 14px; cursor: pointer; font-weight: 600; }
    .faq p { margin: 0; padding: 0 14px 12px; color: #374151; }
  </style>
</head>
<body>
  <div class="faq">
    <details name="faq" open>
      <summary>Is it free?</summary>
      <p>Yes, the basics are free forever.</p>
    </details>
    <details name="faq">
      <summary>Do I need to install anything?</summary>
      <p>No, everything runs in the browser.</p>
    </details>
    <details name="faq">
      <summary>Can I cancel any time?</summary>
      <p>Yes, from your account settings.</p>
    </details>
  </div>
</body>
</html>

Open the second question and the first one closes. Remove the name attributes and they go back to opening independently. An exclusive accordion hides content the reader might want to compare, so use it when sections are alternatives, and plain <details> when people may want several open.

Styling the marker

The triangle is a list marker on the summary. list-style: none removes it (the ::-webkit-details-marker rule covers Safari), and a pseudo-element can draw your own indicator:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom marker</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    details { max-width: 420px; background: #f9fafb; border-radius: 8px; margin-bottom: 8px; }
    summary {
      list-style: none; cursor: pointer;
      display: flex; justify-content: space-between; align-items: center;
      padding: 12px 14px; font-weight: 600;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after {
      content: "+"; font-size: 20px; color: #2563eb;
      transition: transform 0.2s;
    }
    details[open] summary::after { transform: rotate(45deg); }
    summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; border-radius: 8px; }
    details p { margin: 0; padding: 0 14px 12px; }
  </style>
</head>
<body>
  <details>
    <summary>How long are the lessons?</summary>
    <p>Most lessons take five to ten minutes.</p>
  </details>
  <details>
    <summary>Do I get a certificate?</summary>
    <p>Yes, when you finish a course.</p>
  </details>
</body>
</html>

The plus sign rotates 45 degrees into a cross when the section opens. Keep a visible focus style like the :focus-visible outline here: once you remove the default marker, the focus ring is what keyboard users rely on.

The toggle event and the open property

JavaScript can read and set details.open, and the toggle event fires after each change, whether a click, a key or a script caused it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggle</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 4px 10px; margin-inline-end: 6px; }
    details { margin-top: 10px; border: 2px solid #e5e7eb; border-radius: 8px; padding: 8px 12px; }
    #log { color: #16a34a; }
  </style>
</head>
<body>
  <button id="expand">Expand all</button>
  <button id="collapse">Collapse all</button>
  <details><summary>Step 1</summary><p>Create an account.</p></details>
  <details><summary>Step 2</summary><p>Pick a course.</p></details>
  <p id="log">Nothing toggled yet.</p>
  <script>
    const all = document.querySelectorAll('details');
    all.forEach((d) => d.addEventListener('toggle', () => {
      document.getElementById('log').textContent =
        d.querySelector('summary').textContent + (d.open ? ' opened' : ' closed');
    }));
    document.getElementById('expand').onclick = () => all.forEach((d) => { d.open = true; });
    document.getElementById('collapse').onclick = () => all.forEach((d) => { d.open = false; });
  </script>
</body>
</html>

"Expand all" sets open on both, and the log shows the last toggle event. The event does not bubble, so listen on each <details> element rather than on a parent.

What goes in a summary

A summary holds text, inline elements, or a heading when the section title belongs in the page outline:

<details>
  <summary><h3>Refund policy</h3></summary>
  <p>...</p>
</details>

Avoid links, buttons and form fields inside <summary>: the summary is already a control, so a control inside it is easy to miss or hit by mistake, and screen readers announce nested controls poorly. Put interactive content in the body of the <details> instead.

Common mistakes

Building a toggle with a <div> and JavaScript. <details> already handles clicks, keys and screen reader state. When you do need a custom toggle, use a button with aria-expanded.
Putting <summary> anywhere but first. It must be the first child of <details>.
Hiding the marker without a replacement. Give readers some sign that the summary opens, like the plus sign above.
Using display to hide the content. Toggle open instead; CSS that forces the content visible or hidden fights the browser's state.
Exclusive groups for content people compare. Use name only when one open section at a time makes sense.

Frequently Asked Questions

What do details and summary do in HTML?

<details> creates a disclosure widget: a section that can be opened and closed. Its first child, <summary>, is the always-visible label; clicking it (or pressing Enter or Space when it has focus) shows or hides everything else inside <details>.

How do I make a details element open by default?

Add the boolean open attribute: <details open>. The browser adds and removes that attribute as the user toggles it, so CSS can style details[open].

How do I make an accordion where only one section is open?

Give every <details> in the group the same name attribute, for example name="faq". Opening one closes the others in that group, with no JavaScript.

How do I remove or change the arrow in a details summary?

Set list-style: none on summary and add summary::-webkit-details-marker { display: none; } for Safari. Then draw your own indicator, for example with summary::after, and change it with details[open] summary::after.

Can I detect when a details element opens?

Yes. Listen for the toggle event on the <details> element and read its open property. Setting details.open = true in JavaScript opens it.

Related concepts