References

Beginner-friendly references for web development, with live, editable examples.

The HTML <details> tag

Element All modern browsers Updated
Quick answer

The HTML <details> element creates a native disclosure widget — a show/hide section that needs no JavaScript. Its first child <summary> is the always-visible label; add the open attribute to start it expanded.

Overview

The <details> element provides a built-in, accessible expand/collapse widget — ideal for FAQs, "show more" sections and accordions, with no JavaScript required. The first child must be a <summary>, which is the clickable label; everything else inside is the content revealed when it opens.

Add the boolean open attribute to render it expanded initially, and it fires a toggle event whenever it opens or closes, so scripts can react. Give several <details> the same name attribute and they behave as an exclusive accordion — opening one closes the others — again with no script.

Because it is native, you get keyboard support and the right semantics for free, and modern browsers can even find and reveal collapsed content during in-page search. Style the disclosure marker with CSS when the default triangle does not fit your design.

Syntax

<details>
  <summary>Show details</summary>
  <p>Hidden content revealed on click.</p>
</details>

Attributes

The <details> element supports the following attributes, in addition to the global attributes available to every HTML element.

Attribute Value Description
open A boolean attribute — present or absent. Shows a details/dialog in its open state.

Example

Live example 
<details>
  <summary>What is HTML?</summary>
  <p>HyperText Markup Language — the structure of the web.</p>
</details>

Best practices

  • Make a <summary> the first child as the clickable label.
  • Add the open attribute to start a section expanded.
  • Give related <details> the same name to make an exclusive accordion.
  • Restyle the disclosure marker with CSS rather than rebuilding the widget in JavaScript.

Frequently asked questions

How do I make a collapsible section in HTML?
Use a <details> with a <summary> label and the content inside — it expands and collapses with no JavaScript.
How do I make an accordion with details?
Give several <details> elements the same name attribute; opening one then closes the others.
How do I make a details element open by default?
Add the boolean open attribute: <details open>.
How do I style the disclosure triangle?
Restyle or hide the marker with the CSS list-style on the summary, or the ::-webkit-details-marker / ::marker pseudo-elements.
del dfn