<details> ✨ HTML5

Defines additional details that the user can view or hide

Definition and Usage

The <details> element specifies additional details that the user can open and close on demand. It creates a disclosure widget where information is visible only when toggled into an "open" state.

The <details> tag must contain a <summary> tag as its first child (optional, but recommended). The <summary> element establishes a visible heading for the details.

Tip: The <details> element is perfect for creating FAQs, accordion menus, and collapsible sections without JavaScript.

Tip: Use the open attribute to make the details visible by default.

Browser support and standards

Browser rendering and modern HTML conformance are different questions. Check the current element reference for the browsers and features your project needs; the older source version table is not a current compatibility guarantee.

Read the MDN element reference

Attributes

The <details> tag also supports the Global Attributes in HTML.

The <details> tag has the following specific attribute:

Attribute	Value	Description
open	open	Specifies that the details should be visible (open) by default

Examples

Basic Details Element

Create a simple disclosure widget:

Example
<details>
  <summary>Click to reveal more information</summary>
  <p>This is the hidden content that appears when you click the summary.</p>
</details>

With Summary Tag

Use a descriptive summary heading:

Example
<details>
  <summary>System Requirements</summary>
  <ul>
    <li>Operating System: Windows 10 or later</li>
    <li>RAM: 8 GB minimum</li>
    <li>Storage: 500 MB available space</li>
  </ul>
</details>

Open by Default

Display details in an expanded state:

Example
<details open>
  <summary>Important Notice</summary>
  <p>This section is expanded by default. Users can still close it.</p>
</details>

Nested Details

Create hierarchical disclosure widgets:

Example
<details>
  <summary>Chapter 1: Introduction</summary>
  <p>This chapter covers the basics.</p>

  <details>
    <summary>Section 1.1: Getting Started</summary>
    <p>Learn how to set up your environment.</p>
  </details>

  <details>
    <summary>Section 1.2: Basic Concepts</summary>
    <p>Understand the fundamental principles.</p>
  </details>
</details>

FAQ Section

Build a frequently asked questions section:

Example
<h2>Frequently Asked Questions</h2
>

<details>
  <summary>What is HTML?</summary>
  <p>HTML stands for HyperText Markup Language. It's the standard markup language for creating web pages.</p>
</details>

<details>
  <summary>How do I learn HTML?</summary>
  <p>Start with basic tags, practice with examples, and build simple websites. Use online tutorials and interactive platforms.</p>
</details>

<details
  >
  <summary>Is HTML hard to learn?</summary>
  <p>No, HTML is one of the easiest programming languages to learn. It has a simple structure and logical syntax.</p>
</details
>

Accordion Menu

Create an accordion-style menu:

Example
<div class="accordion">
  <details>
    <summary>Products</summary>
    <ul>
      <li><a href="#">Laptops</a></li>
      <li><a href="#">Smartphones</a></li>
      <li><a href="#">Tablets</a></li>
    </ul>
  </details>

  <details>
    <summary>Services</summary>
    <ul>
      <li><a href="#">Support</a></li>
      <li><a href="#">Training</a></li>
      <li><a href="#">Consulting</a></li>
    </ul>
  </details>
</div>

Styled with CSS

Customize the appearance of details elements:

Example
<style>
  details {
    border: 2px solid #10b981;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    background: #f0fdf4;
  }

  summary {
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    color: #059669;
  }

  summary:hover {
    color: #047857;
  }

  details[open] summary {
    margin-bottom: 12px;
    border-bottom: 2px solid #10b981;
    padding-bottom: 8px;
  }
</style>

<details>
  <summary>Styled Details</summary>
  <p>This details element has custom styling applied.</p>
</details>

JavaScript Control

Control details elements programmatically with JavaScript:

Example
<details id="myDetails">
  <summary>JavaScript Controlled Details</summary>
  <p>This can be opened and closed with JavaScript.</p>
</details>

<button onclick="openDetails()">Open</button>
<button onclick="closeDetails()">Close</button>
<button onclick="toggleDetails()">Toggle</button>

<script>
  const details = document.getElementById('myDetails');

  function openDetails() {
    details.open = true;
  }

  function closeDetails() {
    details.open = false;
  }

  function toggleDetails() {
    details.open = !details.open;
  }

  // Listen for toggle event
  details.addEventListener('toggle', function() {
    console.log('Details state:', details.open ? 'open' : 'closed');
  });
</script>

Accessibility Features

Keyboard Accessible: The <details> element is fully keyboard accessible by default
Screen Reader Support: Automatically announces the expanded/collapsed state
ARIA Attributes: No additional ARIA attributes needed - semantics are built-in
Focus Management: Summary element receives focus and can be activated with Enter or Space
Native Widget: Better accessibility than custom JavaScript implementations

<details> vs <dialog>

Comparison between disclosure widgets and modal dialogs:

Feature	<details>	<dialog>
Purpose	Toggle additional content visibility	Display modal or non-modal dialogs
Layout	In-line with content flow	Overlays page content
Interaction	Click to expand/collapse	Open/close programmatically
Use Case	FAQs, accordions, collapsible sections	Alerts, confirmations, forms
JavaScript Required	No (optional for enhanced features)	Yes (to open and close)

Try it Yourself

Interactive Example

Click on the summaries below to expand/collapse the details:

What is the <details> tag?

The <details> tag creates a disclosure widget for hiding and showing content.

Why use <details>?

It provides native collapsible functionality without JavaScript and is fully accessible.

This one is open by default

Use the 'open' attribute to display details expanded by default.

Try in Code Playground

Best Practices

Always include a <summary> element as the first child for better usability
Use descriptive summary text that clearly indicates what content will be revealed
Don't nest too many levels deep - it can confuse users
Consider using the open attribute for important information
Style the summary to look clickable (cursor pointer, hover effects)
Test keyboard navigation and screen reader compatibility
Use for progressive disclosure - show details only when needed
Avoid hiding critical information that users need to see immediately

Related Tags

<summary>
Defines a heading for details element
<dialog>
Defines a dialog box or window
<section>
Defines a section in a document