<u-details>

There is no longer need for <u-details> 🎉
Please use native <details> as it has sufficient support in major browsers and screen readers, but import @u-elements/u-details/polyfill to support Android Firefox users with Talkback screen reader.

<details> lets you open and close content when clicking on a child <summary>. You can use it to make things like accordions, expandables, FAQs, dropdowns, etc.

Quick intro:

• Use <summary> as a direct child - this is the label
• Use any other content in <details> - this will hide/show
• Use the open attribute on <details> to change state
• MDN Web Docs: <details> (HTMLDetailsElement) / <summary> (HTMLElement)

Example

Install polyfill

NPM

npm add -S @u-elements/u-details

PNPM

pnpm add -S @u-elements/u-details

Yarn

yarn add @u-elements/u-details

Bun

bun add -S @u-elements/u-details

CDN

<script type="module" src="https://unpkg.com/@u-elements/u-details@latest/dist/polyfill.js"></script>

import '@u-elements/u-details/polyfill';

Attributes and props

<details>

• Attributes: all global HTML attributes such as id, class, data-
  • open shows content if attribute is present. By default this attribute is absent which means the content is hidden. Note: Setting open="false" will not work as intended, as open is a boolean attribute you should provide or remove entirely.
  • name enables multiple <details> elements to be connected, with only one open at a time.
• DOM interface: HTMLDetailsElement
  • HTMLDetailsElement.open returns true of false reflecting the state
  • HTMLDetailsElement.name returns the corresponding name attribute

<summary>

• Attributes: all global HTML attributes such as id, class, data-
• DOM interface: HTMLElement

Events

In addition to the usual events supported by HTML elements, the <details> element dispatches a toggle event after the open state is changed:

details.addEventListener('toggle', (event) => {
  if (details.open) {
    // the element was toggled open
  } else {
    // the element was toggled closed
  }
});

Styling and animating

The <summary> element is styled with display: list-item, but you can hide the triangle with list-style:none.

<details> hides its content - the ::details-content pseudo element. If your browser supports interpolate-size, you can animate open/close with pure css:

Find-in-page

Even when a <details> element is closed, all of its content remains discoverable through the find-in-page search feature (e.g., Ctrl or Command + F keys). This behavior is supported by various browsers. If a user conducts a search for content within a details element, it will automatically open and trigger the toggle event.

Accessibility (tested 21.01.26)

Screen reader	<details>	@u-elements/u-details/polyfill
VoiceOver (Mac) + Chrome	✅	✅
VoiceOver (Mac) + Edge	✅	✅
VoiceOver (Mac) + Firefox	✅	✅
VoiceOver (Mac) + Safari	✅	✅
VoiceOver (iOS) + Chrome	✅	✅
VoiceOver (iOS) + Safari	✅	✅
Jaws (PC) + Chrome	✅	✅
Jaws (PC) + Edge	✅	✅
Jaws (PC) + Firefox	✅	✅
NVDA (PC) + Chrome	✅	✅
NVDA (PC) + Edge	✅	✅
NVDA (PC) + Firefox	✅	✅
Narrator (PC) + Chrome	✅	✅
Narrator (PC) + Edge	✅	✅
Narrator (PC) + Firefox	✅	✅
TalkBack (Android) + Chrome	✅	✅
TalkBack (Android) + Samsung Internet	✅
TalkBack (Android) + Firefox	❌ Does not announce role or state	✅

Specifications

• DOM interface: HTMLDetailsElement
• HTML Standard: The <details> element
• HTML Standard: The <summary> element

Changelog

• 0.2.2: Correct package name in deprecation message
• 0.2.1: Ensures single polyfill instance in hot-reloaded environments
• 0.2.0: Deprecateds <u-details> and adds @u-elements/u-details/polyfill
• 0.1.5: Add tabindex="-1" to content when closed to preved Firefox from making it a tabstop
• 0.1.4: Remove aria-labelledby="summary-id" to reduce information duplication
• 0.1.3: Enable declarative shadow root support and export UHTMLDetailsShadowRoot for easier server side rendering
• 0.1.2: Add role="group" to align with semantics