HTML details playground

details contains a summary followed by expandable content: paragraphs, lists, or other flow elements. The first summary is the label that remains visible and activates the toggle. Write a name that helps people decide whether to open it.

open is a Boolean attribute: its presence opens the block. open="false" also opens it; to close it, remove the attribute or set details.open = false. The browser updates open when summary is activated, without a custom click listener.

Opening pushes subsequent content down; closing removes the panel from the normal reading and focus journey. There is no top layer, inert background, or Escape dismissal. Keep information needed to complete the task visible.

Without name, each block opens independently and several can remain open. This helps compare information or browse questions without losing previous answers. The first recipe initially opens one block with open.

A shared non-empty name creates an exclusive group: opening one member closes the previous one; activating it again can leave all members closed. No JavaScript is needed to enforce this relationship in supporting browsers.

Members are grouped by name within the same tree, even when they are not siblings. Use a distinct name for each set and keep members together under a heading. Do not nest one member inside another with the same name or declare multiple open members. This guide uses a different name from the playground.

<div id="details-guide-independent">
  <details open>
    <summary>When will my order arrive?</summary>
    <p>Standard delivery takes two to four working days after dispatch.</p>
  </details>
  <details>
    <summary>How do I prepare a return?</summary>
    <p>Keep the packaging and include your order number when requesting a return.</p>
  </details>
</div>

:root {
  color-scheme: light dark;
}

#details-guide-independent {
  display: grid;
  gap: 1rem;
  color: light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: anywhere;

  details {
    min-inline-size: 0;
    border: 1px solid light-dark(oklch(0.84 0.01 95), oklch(0.36 0.024 260));
    border-radius: 16px;
    corner-shape: squircle;
    background: light-dark(oklch(0.98 0.005 95), oklch(0.16 0.02 260));
  }

  summary {
    display: list-item;
    min-block-size: 2.75rem;
    padding: 0.75rem 1rem;
    font-weight: 800;
    cursor: pointer;

    &:focus-visible {
      outline: 3px dashed light-dark(oklch(0.46 0.14 261), oklch(0.82 0.18 261));
      outline-offset: 3px;
    }
  }

  details[open] > summary {
    border-block-end: 1px solid light-dark(oklch(0.84 0.01 95), oklch(0.36 0.024 260));
  }

  p {
    margin: 0;
    padding: 1rem;
  }
}

<div id="details-guide-exclusive">
  <details name="details-guide-exclusive" open>
    <summary>When will my order arrive?</summary>
    <p>Standard delivery takes two to four working days after dispatch.</p>
  </details>
  <details name="details-guide-exclusive">
    <summary>How do I prepare a return?</summary>
    <p>Keep the packaging and include your order number when requesting a return.</p>
  </details>
</div>

:root {
  color-scheme: light dark;
}

#details-guide-exclusive {
  display: grid;
  gap: 1rem;
  color: light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: anywhere;

  details {
    min-inline-size: 0;
    border: 1px solid light-dark(oklch(0.84 0.01 95), oklch(0.36 0.024 260));
    border-radius: 16px;
    corner-shape: squircle;
    background: light-dark(oklch(0.98 0.005 95), oklch(0.16 0.02 260));
  }

  summary {
    display: list-item;
    min-block-size: 2.75rem;
    padding: 0.75rem 1rem;
    font-weight: 800;
    cursor: pointer;

    &:focus-visible {
      outline: 3px dashed light-dark(oklch(0.46 0.14 261), oklch(0.82 0.18 261));
      outline-offset: 3px;
    }
  }

  details[open] > summary {
    border-block-end: 1px solid light-dark(oklch(0.84 0.01 95), oklch(0.36 0.024 260));
  }

  p {
    margin: 0;
    padding: 1rem;
  }
}

Reach summary with Tab and try Enter and Space to open and close it. Focus stays on summary when activated; with the panel open, Tab can continue to inner links or fields. The name attribute does not add arrow-key navigation between labels.

Keep native semantics: do not redundantly add role="button", tabindex="0", or aria-expanded to summary. The browser exposes the expanded state. Avoid links and buttons inside the label so actions do not compete with the toggle; place them in the content.

A heading inside summary is permitted HTML, but its role can vary in assistive technology. These recipes use plain text and put the group title outside. Check names, state, and reading in your browser and screen reader combinations.

If a script closes a block while focus is inside, move it to a visible, logical destination such as its summary. Do not force focus into the content on every opening or turn the block into a Tab trap. Let people choose how to explore it.

summary uses display: list-item by default and keeps its disclosure marker. Changing it to flex or grid can remove that marker. These recipes keep list-item, padding, and visible focus; [open] adds a border separating label and content.

You can adjust summary::marker, but it does not accept all box properties and customization varies across browsers. If replacing it with your own icon, keep a visible opening cue and test Safari, keyboard access, and forced colors. Removing the triangle without another cue makes the control harder to discover.

details[open] covers these recipes’ state. :open and ::details-content are enhancements with their own support; the latter selects content without summary. Check each selector with @supports selector(...) before adding an enhancement and preserve the base toggle.

Adding transition to details does not animate content height by itself. An opening transition needs sizing and visibility handling, with support separate from ::details-content. These recipes do not animate; if you add motion, respect prefers-reduced-motion and avoid hiding content or focus with fixed heights.

toggle is sent to details after its state changes. It is neither cancelable nor bubbling: listen directly on each block, or use capture when needed. Read details.open for the current state and synchronize the observer when initializing.

Several rapid changes to open may be coalesced into one event. Do not use toggle as a click counter or change open again in a summary click listener: you could reverse the native action twice. In an accordion, opening one member can also produce toggle on the closing member.

<div id="details-guide-events">
  <details id="details-guide-events-disclosure">
    <summary>View packing instructions</summary>
    <p>Protect fragile items and avoid empty spaces inside the box.</p>
  </details>
  <p class="status">
    Observed state:
    <output id="details-guide-events-status" data-opened="Open" data-closed="Closed">The observer needs JavaScript.</output>
  </p>
</div>

:root {
  color-scheme: light dark;
}

#details-guide-events {
  display: grid;
  gap: 1rem;
  color: light-dark(oklch(0.22 0.01 95), oklch(0.95 0.01 95));
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: anywhere;

  details {
    min-inline-size: 0;
    border: 1px solid light-dark(oklch(0.84 0.01 95), oklch(0.36 0.024 260));
    border-radius: 16px;
    corner-shape: squircle;
    background: light-dark(oklch(0.98 0.005 95), oklch(0.16 0.02 260));
  }

  summary {
    display: list-item;
    min-block-size: 2.75rem;
    padding: 0.75rem 1rem;
    font-weight: 800;
    cursor: pointer;

    &:focus-visible {
      outline: 3px dashed light-dark(oklch(0.46 0.14 261), oklch(0.82 0.18 261));
      outline-offset: 3px;
    }
  }

  details[open] > summary {
    border-block-end: 1px solid light-dark(oklch(0.84 0.01 95), oklch(0.36 0.024 260));
  }

  p {
    margin: 0;
    padding: 1rem;
  }
}

(() => {
  const disclosure = document.getElementById('details-guide-events-disclosure');
  const status = document.getElementById('details-guide-events-status');
  if (!disclosure || !status || disclosure.dataset.bound) return;
  disclosure.dataset.bound = 'true';

  const update = () => {
    status.textContent = disclosure.open
      ? status.dataset.opened
      : status.dataset.closed;
  };
  disclosure.addEventListener('toggle', update);
  update();
})();

details also does not replace tabs, a command menu, or an options list. Those patterns have different relationships and keys. A form can live inside, but collapsing it does not disable fields or remove validation: avoid hiding errors or required fields without a clear way to find them.

• Read the Popover API guide
• Read the dialog guide

details, summary, and open are Widely Available. Native opening needs no JavaScript. The card describes general compatibility; it does not certify this browser or the assistive technology journey.

name is Newly Available since September 3, 2024: Chrome/Edge 120, Firefox 130, and Safari 17.2. Without exclusivity, the recipe preserves content and independent toggling. This degradation works when showing several answers together remains useful.

"name" in HTMLDetailsElement.prototype detects the reflected property in supporting browsers; writing the attribute does not verify exclusivity. If your application requires only one open member, check the group behavior and choose its fallback. These recipes accept independent opening and add no polyfill.

Do not infer search behavior from base support: finding text in a closed details and revealing it depends on the browser and version; MDN records scrolling limits in Safari. Also check links to inner content in your actual targets. Hiding content in the DOM does not make it private.

Support for :open, ::details-content, and animation techniques is checked separately. The example uses [open] and a native marker to work without them. All editorial content and HTML/CSS examples are served in full without JavaScript.