Path // www.yourhtmlsource.com → Reference → <details>

<details>

by Ross Shannon

The <details> element creates a disclosure widget from which the user can obtain additional information or controls. The widget is typically presented with a small triangle that rotates to indicate open/closed state. A <summary> element provides the visible label for the widget. This is one of HTML's built-in interactive elements that works without JavaScript.

Clock This page was last updated on 2025-11-17


Syntax

<details>
  <summary>Click to expand</summary>
  <p>Hidden content revealed when expanded.</p>
</details>

The element requires both opening and closing tags. The first child should be a <summary> element that provides the label. All other content is hidden until the user opens the widget. If no summary is provided, browsers display a default label like "Details".

Attributes

  • open - Boolean attribute that indicates whether the details are currently visible. When present, the content is shown; when absent, it's hidden. Can be toggled via JavaScript.

    <details open>...</details>

  • name - Groups multiple details elements together so only one can be open at a time (accordion behavior). Added in HTML Living Standard.

    <details name="faq">...</details>

  • Global attributes - The <details> element supports all global attributes such as id, class, style, lang, and dir.

Examples

Basic FAQ Item

<details>
  <summary>What is HTML?</summary>
  <p>HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the structure of web content using elements and tags.</p>
</details>

Accordion with Exclusive Opening

<details name="accordion">
  <summary>Section 1</summary>
  <p>Content for section 1...</p>
</details>
<details name="accordion">
  <summary>Section 2</summary>
  <p>Content for section 2...</p>
</details>
<details name="accordion">
  <summary>Section 3</summary>
  <p>Content for section 3...</p>
</details>

Open by Default

<details open>
  <summary>Important Notice</summary>
  <p>This content is visible by default because the open attribute is present. Users can still collapse it by clicking the summary.</p>
</details>

When to Use

Use the <details> element when:

  • Creating FAQ sections with expandable answers
  • Building accordions for organizing content
  • Hiding advanced options or settings
  • Providing supplementary information that not all users need
  • Creating collapsible code examples or verbose content
  • Implementing progressive disclosure patterns

Do NOT use <details> when:

  • The content should always be visible (that's regular content)
  • Creating navigation menus (use nav with proper navigation patterns)
  • You need custom animations or behaviors (consider JavaScript solutions)
  • The hidden content is required for form submission (it may be overlooked)

JavaScript events:

<details> elements fire a "toggle" event when opened or closed:

detailsElement.addEventListener('toggle', (event) => {
  if (event.target.open) {
    console.log('Details opened');
  } else {
    console.log('Details closed');
  }
});