attention to <details>: how to use html’s native dropdown element

anatomy of the <details> element

The <details> element has two parts: a <summary> and content.

<details>
       <summary>This is my summary!</summary>
       <p>This is my secret hidden information!</p>
</details>

The result looks like this:

This is exactly the foundation we need to create interactive dropdowns like FAQs, or organize information like on a Wikipedia page. The <summary> is the always-visible label that the user clicks to expand. Everything else inside <details> is the hidden content that appears on click.

Use a <p> or <span> for content. Headings inside <details> should be avoided, but if you need to use one inside a <summary>, set it to display: inline to avoid spacing issues.

Semantically, <details> should only be used to collapse information elegantly. It’s not a substitute for navigation menus, footnotes, or other elements that already have proper HTML equivalents.

open vs. closed

By default, <details> loads as collapsed. However, we can adjust that, using the open attribute selector.

<details open>
       <summary>This is my summary!</summary>
        <p>This information is NOT secret.</p>
</details>

The result loads like this:

This is handy for things like instructions at the top of a form. Display them upfront, but let the user collapse them once they’ve read enough.

exclusivity

As of 2024, you can use the name attribute to create a group of dropdowns where only one can be open at a time. When one opens, any other with the same name automatically closes.

<details name="exclusive" open>
       <summary>First item</summary>
       <p>This information is NOT secret.</p>
</details>

<details name="exclusive">
       <summary>Second item</summary>
       <p>This information IS secret.</p>
</details>

The results behave like this:

This is particularly useful for lengthy content, keeping content tidy as users browse.

styling with css

<details> accepts standard CSS just like any other element — background colours, borders, max-width, and so on.

To style individual parts of the element without adding classes or IDs, use these pseudo-elements:

• details summary — the summary element itself
• summary::marker — the little disclosure triangle
• summary::after — useful for adding custom text or icons
• details::details-content — the expanded content area (new as of September 2025; may still have Safari issues)

Use summary::after when adding toggle arrows, icons, or swappable text. Use details::details-content when styling the expanded section, or adding padding and backgrounds to the content container. See demos 4, 5, and 6 here to see it in action.

animating <details>

Edge and Chrome-based browsers already support simply adding transition and animate line items to CSS for <details>, but Firefox and Safari have yet to implement. It still is worth including these in your CSS, though, because even though your content will still statically snap open and shut on Firefox and Safari right now, when the browser support is added, it will immediately start working.

Alternatively, a workaround in the mean time is animating all the content that comes after the summary instead of targeting the <details> element directly.

details[open] summary ~ * {
  animation: open 0.3s ease-in-out;
}

@keyframes open {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

bonus: <details-utils>

Zach Leatherman (@zachleat on GitHub) created an open source web component called <details-utils> that wraps your <details> element and adds a suite of useful behaviours with no extra JavaScript to write yourself:

• Click outside to close
• Bind an optional close button
• Close with the Escape key
• More elegant open/close animation
• Toggle between multiple CSS classes
• Force open or closed based on media queries

You can link it into your HTML the same way you’d include any external script or font library. Full details on his blog: zachleat.com/web/details-utils/

This is worth exploring if you’re using <details> for something substantial, like a site-wide FAQ.

recap

summary and content = details