Fixing the details Element

The HTML5 <details></details> element offers a concise way to create collapsible content, but it presents a significant usability challenge: hash links targeting content within a collapsed <details></details> section fail to reveal that content. This article details a progressively enhanced JavaScript solution, including an accessible polyfill for browsers lacking native support, to resolve this issue.

Key Takeaways:

1. The <details></details> element, while useful, suffers from a usability problem with hash links targeting hidden content.
2. A polyfill effectively emulates <details></details> functionality for unsupported browsers.
3. The polyfill's effectiveness is compromised when a hash link points to an element inside a collapsed region. The page remains at the top, obscuring the target.
4. A recursive function addresses this by automatically expanding the relevant <details></details> elements.

Introducing <details></details>

The <details></details> element, paired with the <summary></summary> element, creates collapsible content. The <summary></summary> (if present) must be the first or last child; all other content is collapsible. The open attribute forces the content to be initially visible. Currently, only Chrome fully supports <details></details>. The following image illustrates Chrome's rendering:

Creating a Polyfill

A basic polyfill detects native support via the open property. Native implementations don't require manual open attribute updates, but ARIA attributes still need management. A typical structure looks like this:

<code class="language-html"><details open="open">
  <summary>This is the summary element</summary>
  <div>This is the expanding content</div>
</details></code>

The script manages the aria-expanded attribute and uses it as a CSS selector for visual collapsing:

<code class="language-css">details > div[aria-expanded="false"] {
  display: none;
}</code>

A wrapping <div> simplifies managing <code>aria-expanded and display properties, especially for older browsers like IE7, which required additional style handling. The addClickEvent function handles browser inconsistencies in keyboard click event firing:

<code class="language-javascript">function addClickEvent(node, callback) {
  // ... (function body as in original article) ...
}</code>

Highlighting the Hash Problem

The core problem arises when a hash link (#first-content, for example) targets an element within a collapsed <details></details> region. The page doesn't scroll to the target; it remains at the top, leaving the target hidden.

Fixing the Hash Problem

The recursive autostate function solves this:

<code class="language-html"><details open="open">
  <summary>This is the summary element</summary>
  <div>This is the expanding content</div>
</details></code>

This function recursively expands any ancestor <details></details> elements containing the target. It's called on page load for location.hash and on internal link clicks. To ensure reliable scrolling, window.scrollBy is used after expanding, positioning the target within the viewport. The original location.hash behavior (no automatic scrolling on page refresh) is maintained.

Conclusion

This enhanced solution, termed an "omnifill," extends beyond basic polyfilling. It improves usability and accessibility for all browsers, addressing inherent limitations of the <details></details> element.

Frequently Asked Questions (FAQs) about the HTML Details Element

(The FAQs section from the original input remains unchanged.)