HTML Details and Summary: Collapsible Content Without JavaScript

A guide often includes explanations that only some readers need. Showing everything can distract from the main task, while a custom toggle introduces state and interaction code. For simple supplementary content, HTML provides details and summary.

1. Choose what to collapse

Consider file-format help beside a data import interface. Experienced users can continue, while newcomers open the explanation. Required size limits or warnings about data loss should remain visible beside the relevant action instead of being buried in a closed panel.

The MDN details reference describes a native disclosure element. Basic opening and closing requires no JavaScript.

2. A small import-help example

<details class="import-help">
  <summary>Which columns does the CSV file need?</summary>
  <p>The first row needs two column names: name and email.</p>
  <pre><code>name,email
Demo,demo@example.com</code></pre>
  <p>Use mock data when testing imports.</p>
</details>

Place summary as the first child element of details. Give it a descriptive label, such as the CSV question, instead of repeating “Read more” everywhere. See the MDN summary reference.

This example implements help, not a CSV importer. Column validation, duplicate handling and import authorization remain server-side application responsibilities.

3. open="false" still means open

open is Boolean: its presence opens the panel; its absence closes it. Use <details open> for an initially expanded panel and omit the attribute for a closed one. Writing open="false" does not close it.

Watch for this in server templates. A false configuration value should omit the attribute, not become a string in the markup. Inspect the final HTML in browser developer tools.

4. Keep styling and interaction cues clear

.import-help {
  border: 1px solid #777;
  border-radius: 0.5rem;
  padding: 1rem;
}
.import-help > summary {
  cursor: pointer;
  font-weight: 600;
}
.import-help > summary:focus-visible {
  outline: 3px solid #075ab5;
  outline-offset: 4px;
}

This CSS keeps the default disclosure marker and adds a focus outline. Put supplementary links or buttons in the expanded content rather than inside the label, so each area has a clear purpose. Reassess colors against the actual page background.

5. Collapsing is neither authorization nor lazy loading

Content delivered in HTML remains inspectable even when the panel is closed. Never treat details as protection for tokens, private information or data the visitor is not authorized to receive.

Likewise, a closed panel does not establish that all image or resource requests are deferred. If network savings are the goal, design the loading behavior explicitly and measure it in Network. A shorter layout does not prove a faster page.

6. Release checklist

• Tab to summary and try Space to toggle it; focus should remain visible.
• Test the label and state with a screen reader on target browser combinations.
• Check narrow screens, enlarged text and JavaScript-disabled operation.
• Keep mandatory information easy to find outside collapsed content.
• Test templates with both true and false initial-state configuration.
• When using a CMS, verify its HTML filter preserves details and summary.

This is a checklist for your product, not a report of completed browser tests. Start with simple HTML and add behavior only when needed to keep supplementary help understandable and maintainable.