<details> / <summary>

Since:		HTML5（2014）

The <details> element creates a disclosure widget that can be opened and closed by clicking. The <summary> element specifies the visible heading label for the toggle control.

Syntax

<details>
  <summary>Click to expand</summary>
  <p>Content shown when open</p>
</details>

Attributes

Attribute	Description
open	When added to `<details>`, the content is displayed in the open state when the page loads.

Sample Code

sample_details_summary.html

<!-- Accordion that starts closed -->
<details>
  <summary>What is HTML?</summary>
  <p>HTML stands for HyperText Markup Language. It is the language used to describe the structure of web pages.</p>
</details>

<!-- Open by default -->
<details open>
  <summary>What is CSS?</summary>
  <p>CSS stands for Cascading Style Sheets. It is the language used to style the structure created with HTML.</p>
</details>

<!-- You can also include a list inside -->
<details>
  <summary>Common programming languages</summary>
  <ul>
    <li>JavaScript</li>
    <li>Python</li>
    <li>PHP</li>
    <li>Swift</li>
  </ul>
</details>

Output

The first item appears closed (▶ What is HTML?), and the second appears open from the start (▼ What is CSS? + content). Clicking the heading toggles it open or closed.

View sample page

Customizing with CSS

You can hide the default ▶ marker with CSS and replace it with a custom icon or animation.

<style>
  /* Hide the default marker and replace with a custom one */
  details summary {
    cursor: pointer;
    list-style: none; /* Firefox */
    padding: 12px 16px;
    background: #f5f5f5;
    border-radius: 4px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
  }
  details summary::-webkit-details-marker {
    display: none; /* Chrome / Safari */
  }

  /* Custom open/close icon (+/-) using ::after */
  details summary::after {
    content: "+";
    font-size: 1.2em;
    color: #4a90e2;
    transition: transform 0.2s;
  }
  details[open] summary::after {
    content: "−";
  }

  /* Content area */
  details .content {
    padding: 16px;
    border: 1px solid #eee;
    border-top: none;
    border-radius: 0 0 4px 4px;
  }

  /* FAQ style */
  details {
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 8px;
  }
  details[open] summary {
    border-radius: 4px 4px 0 0;
    background: #e8f0fe;
  }
</style>

<details>
  <summary>What is HTML?</summary>
  <div class="content">
    <p>HTML (HyperText Markup Language) is the language used to describe the structure of web pages.</p>
  </div>
</details>

<details>
  <summary>What is CSS?</summary>
  <div class="content">
    <p>CSS (Cascading Style Sheets) is the language used to style HTML content.</p>
  </div>
</details>

Detecting the toggle Event with JavaScript

The toggle event fires every time the element is opened or closed. This can be used for lazy-loading content the first time the widget is opened.

<details id="lazySection">
  <summary>Show details (loads on first click)</summary>
  <div id="lazyContent">Loading...</div>
</details>

<script>
var details = document.getElementById('lazySection');
var content = document.getElementById('lazyContent');
var loaded = false;

// toggle event: fires on every open/close
details.addEventListener('toggle', function() {
  if (details.open && !loaded) {
    loaded = true;
    // Load content asynchronously on first open only
    setTimeout(function() {
      content.textContent = 'Content loaded!';
    }, 500);
  }
});
</script>

Notes

Using <details> and <summary> together lets you build an accordion (collapsible) UI without any JavaScript. They are commonly used for FAQs, glossaries, and folding away lengthy supplementary content.

<summary> must always be the first child element of <details>. If you omit <summary>, the browser will display a default label such as "Details," so always provide one explicitly. You can also place heading elements (<h2> through <h6>) or inline elements such as <span> inside <summary>.

The open/closed state can be detected with the JavaScript toggle event, which makes it possible to lazy-load content dynamically when the widget is opened. You can also use the CSS details[open] selector to apply styles only when the element is in the open state.