HTML Details: Browser Support, Attributes, Styling

What is the HTML details element?

The details element is an interactive HTML tag defined by the WHATWG HTML Living Standard. It creates a disclosure widget that shows or hides its child content when the user clicks the summary label. The first child must be a summary element, which acts as the clickable label.

Which browsers does the HTML details element support?

The details element ships in every modern browser engine and is marked Widely Available on the Web Platform Baseline. Internet Explorer is the only major engine that never added support, and a few rendering details still differ between Chromium, Gecko, and WebKit.

What attributes does the HTML details element support?

The details element accepts two element-specific attributes plus the global HTML attribute set. Both attributes are simple to set in markup and require no JavaScript to drive the disclosure behavior.

• open: A boolean attribute that controls whether the panel renders open. Add open to render the content visible on first paint; remove it to start the panel closed. open="false" still keeps the panel open because boolean attributes only check for presence, not value.
• name: A string attribute that groups multiple details elements into an exclusive accordion. Only one panel with the same name can be open at a time, even if the elements are not adjacent in the DOM. Supported in Chrome 120+, Edge 120+, Firefox 130+, Safari 17.2+, and Samsung Internet 23+.
• summary child: The first child must be a summary element, which renders as the clickable label. If the summary is missing, browsers fall back to the user-agent label, usually the literal word "Details".
• toggle event: Browsers fire a toggle event on the details element each time it switches between open and closed. The event is coalesced, so rapid state changes only fire once. Use it to lazy-load images or analytics when a panel opens.
• Global attributes: The details element accepts every global HTML attribute, including id, class, style, hidden, lang, and the full ARIA attribute set, so it slots into any design system without extra plumbing.

How do you style the HTML details element?

The disclosure triangle, the summary label, and the open and closed states all expose CSS hooks. The catch is that Safari still needs the legacy WebKit pseudo-element for the marker, so any cross-browser stylesheet has to carry both the standard rule and the WebKit fallback.

• ::marker on summary: Chrome, Edge, Firefox, and Opera let you change the disclosure triangle color, size, or content with summary::marker. Use content: "+" on closed and details[open] summary::marker with content: "−" on open for a plus and minus icon set.
• ::-webkit-details-marker for Safari: Safari and iOS Safari ignore ::marker on summary, so add a parallel summary::-webkit-details-marker rule. Set display: none on this pseudo-element if you want to hide the triangle and ship a custom icon instead.
• list-style on summary: Setting summary { list-style: none } removes the default triangle in every modern engine. Pair it with a custom span inside the summary that you rotate with a CSS transform when the parent matches details[open].
• details[open] selector: Style the open state with the attribute selector details[open]. Newer browsers also expose the :open pseudo-class, but the attribute selector is safer because it works in every browser that supports the element at all.
• Animations and transitions: Native height transitions only work in Chrome 129+ and Edge 129+ when interpolate-size: allow-keywords is set on a parent. For Firefox and Safari, drive the height with a JavaScript animation on the toggle event.

// Feature detect the details element before relying on it.
const supportsDetails = "open" in document.createElement("details");

if (!supportsDetails) {
    document.documentElement.classList.add("no-details");
}

// Listen for open and close transitions on every details panel on the page.
document.querySelectorAll("details").forEach((panel) => {
    panel.addEventListener("toggle", () => {
        const state = panel.open ? "opened" : "closed";
        console.log("Disclosure " + state + ":", panel.querySelector("summary").textContent);
    });
});

What are the use cases of the HTML details element?

The details element replaces a stack of older patterns built on JavaScript click handlers, ARIA roles, and toggleable hidden classes. Most teams adopt it on surfaces where one chunk of secondary content has to collapse without bringing in a component library.

• FAQ pages: Each question is a summary, each answer is the panel body, and a search engine still indexes the hidden text. Pair the details element with FAQPage JSON-LD to qualify for rich results without any custom widget code.
• Accordions and grouped panels: Add the same name attribute to several details elements to ship a true single-open accordion in modern Chrome, Edge, Firefox, and Safari without writing a click handler.
• Spoiler and content warning blocks: A summary that says "Show spoiler" collapses sensitive text by default. The toggle event lets you log a consent action when the user opens the panel.
• Documentation collapsibles: Long API reference pages collapse advanced parameters, deprecation notes, and code examples into details panels, so the page stays scannable without losing depth.
• Mobile filter panels: E-commerce product listings collapse filter groups such as Brand, Size, and Price into details panels on small viewports. The native disclosure widget keeps the page light without a third-party UI library.
• Inline help and footnotes: Long-form articles and dashboards use details elements to hold tooltips, methodology notes, and definitions that only a fraction of readers will expand.

What are the known issues with the HTML details element?

The details element is widely available, but several rendering and accessibility quirks still bite teams. Most issues come from Safari's marker pseudo-element gap, the lack of a portable open and close animation, and the way Firefox and Safari handle in-page search inside a closed panel.

• Safari needs ::-webkit-details-marker: Safari and iOS Safari ignore ::marker on the summary. Ship summary::-webkit-details-marker alongside summary::marker so the disclosure triangle stays consistent across Chrome, Firefox, and Safari traffic.
• No portable open and close animation: Only Chrome 129+ and Edge 129+ animate the height natively when interpolate-size: allow-keywords is enabled. Firefox and Safari snap the panel open. For a portable transition, drive the height in JavaScript on the toggle event.
• Find in page only expands in Chrome and Edge: Chrome and Edge expand a closed details element when its hidden text matches an in-page search, while Firefox and Safari leave it closed. For accessibility-critical content, render the panel open by default in Firefox and Safari.
• Screen reader behavior varies: NVDA, JAWS, and VoiceOver each announce the open and closed state slightly differently, and some older versions miss the state change entirely. Add aria-expanded to the summary if you need a deterministic announcement.
• Internet Explorer has no support: IE 5.5 to 11 ignore the markup and render the content in a flat block. Ship a polyfill such as details-element-polyfill if your traffic still includes IE, or move legacy users to an Edge IE Mode tab.
• Nested details accessibility traps: Deeply nested details elements can confuse focus order and screen reader navigation. Keep nesting to a single level and use the name attribute to group siblings instead.

In my experience, the trap that catches teams most often is shipping a custom disclosure triangle with summary::marker only, then discovering on a real iPhone that Safari still paints the default arrow because the WebKit pseudo-element rule was never added.

Citations

All HTML details element version numbers and platform notes in this guide come from these primary sources:

• WHATWG HTML Living Standard - The details element: html.spec.whatwg.org/multipage/interactive-elements.html#the-details-element
• MDN Web Docs - details element: developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details
• MDN Web Docs - HTMLDetailsElement interface: developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement
• MDN Web Docs - summary element: developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/summary
• web.dev - Details and summary: web.dev/learn/html/details
• Chrome Platform Status - details name attribute: chromestatus.com/feature/5102703812411392
• WebKit blog - Disclosure widgets in Safari: webkit.org/blog
• Mozilla Firefox 49 release notes: mozilla.org/en-US/firefox/49.0/releasenotes
• Microsoft Learn - Microsoft Edge developer documentation: learn.microsoft.com/en-us/microsoft-edge/web-platform
• Wikipedia - HTML5: en.wikipedia.org/wiki/HTML5
• scottohara.me - The details and summary elements, again: scottohara.me/blog/2022/09/12/details-summary.html
• Web Platform Baseline: web.dev/baseline