7.1 — Native Disclosure Widgets: `<details>` & `<summary>`

For years, making content toggle open and closed required JavaScript. HTML now provides a pure, declarative solution: the <details> and <summary> elements. The browser handles the opening, closing, accessibility announcements, and keyboard navigation – no scripting needed.

How the Disclosure Engine Works

The entire behaviour is controlled by a single boolean attribute: open. When open is absent, the browser:

Renders only the <summary> child.
Hides all other content visually (it exists in the DOM but occupies zero space).
Sets aria-expanded="false" on the summary, telling screen readers the section is collapsed.

When open is present (either hardcoded in HTML or toggled by the user), the browser:

Paints all child content, calculating its layout dimensions.
Updates aria-expanded="true".
Fires a native toggle event that scripts can listen to (though none are required).

The default marker (a small triangle) can be removed or styled with CSS – but its behaviour is entirely native.

Basic Syntax

The <details> element wraps everything. The <summary> is its first child – the always‑visible trigger. All other content is hidden until the user clicks the summary.

<details>
  <summary>Click to reveal more</summary>
  <p>This content is hidden by default.</p>
</details>

Click to reveal more

This content is hidden by default.

Starting in the Open State

Add the open attribute to the <details> tag. The content is visible immediately when the page loads.

<details open> ... </details>

This section is initially open

The browser shows this without any user click.

Built‑in Accessibility and Styling Hooks

The browser gives you excellent accessibility for free:

The <summary> is automatically assigned role="button".
Its aria-expanded state is managed automatically – no manual ARIA required.
Keyboard users can toggle the disclosure with Enter or Space when the summary is focused.

The default triangle marker is a ::marker pseudo‑element on the <summary>. To remove it and use your own icon, you can set:

summary { list-style: none; }

                summary::-webkit-details-marker { display: none; }

This leaves you with a completely blank canvas to add custom icons via CSS, while keeping all the native interaction logic.

Enterprise Blueprint – Diagnostic Accordion

Below is a production‑grade disclosure component with a unique id, initial open state, and structured content. It follows our engineering workflow: write the tag pair first, then populate.

<details id="diagnostic-accordion" open>
  <summary>System Analytics Architecture Registry</summary>
  <div class="disclosure-content-envelope">
    <p>Operational status flags have successfully verified
       all clean core ingestion parameters.</p>
  </div>
</details>

System Analytics Architecture Registry

Operational status flags have successfully verified all clean core ingestion parameters.

Click the summary to toggle the block. No JavaScript was written – this is entirely handled by the browser’s native disclosure engine.

TAKEAWAY

The <details> and <summary> pair is a zero‑JavaScript, fully accessible accordion. Use the open attribute to set initial visibility, and remember that all content inside is real DOM – always available to search engines and screen readers. For complex interactive patterns that require heavy styling or animation, this native foundation can still be the base; for simple disclosure, it’s all you need.