<summary>-Detailed summary

The <summary> element in HTML5 is used in conjunction with the <details> tag to define a clickable summary or title. Users can click it to expand or collapse the hidden content within <details>. This interaction is particularly suitable for displaying optional detailed information, such as FAQs, code examples, or configuration instructions.

Basic Usage of <summary>

The <summary> must be the first child element of <details>. By default, the content of <details> is hidden, and clicking the <summary> toggles its visibility. Here’s a simple example:

<details>
  <summary>Click to view details</summary>
  <p>This is the hidden detailed content, which is only displayed after clicking the summary.</p>
</details>

Rendered example:

<details> <summary>Click to view details</summary> <p>This is the hidden detailed content, which is only displayed after clicking the summary.</p> </details>

Default Styling of <summary>

Browsers apply default styles to <summary>, typically including a triangular icon (▶ or ▼) to indicate the expanded state. The default styling may vary slightly across browsers. You can customize this icon using CSS:

details summary {
  list-style: none; /* Hide the default icon */
}
details summary::before {
  content: "→ "; /* Custom icon */
}

Controlling Default Expanded State

Use the open attribute to make <details> expanded by default:

<details open>
  <summary>Details expanded by default</summary>
  <p>This content is visible when the page loads.</p>
</details>

Nesting <details>

<details> can be nested to create multi-level collapsible content:

<details>
  <summary>Level 1 Menu</summary>
  <details>
    <summary>Level 2 Menu</summary>
    <p>Level 2 menu content</p>
  </details>
</details>

Interaction with JavaScript

You can listen for the toggle event to respond to expand/collapse state changes:

<details id="myDetails">
  <summary>Interactive details</summary>
  <p>An event is triggered when the state changes.</p>
</details>

<script>
  document.getElementById('myDetails').addEventListener('toggle', function(event) {
    console.log(this.open ? 'Expanded' : 'Collapsed');
  });
</script>

Use in Forms

<details> and <summary> can organize complex form options:

<details>
  <summary>Advanced options</summary>
  <div>
    <label><input type="checkbox"> Option 1</label>
    <label><input type="checkbox"> Option 2</label>
    <label><input type="checkbox"> Option 3</label>
  </div>
</details>

Accessibility Considerations

To ensure accessibility, <summary> should provide clear text descriptions. The aria-expanded attribute can enhance accessibility:

<details>
  <summary aria-expanded="false">Accessible summary</summary>
  <p>Screen readers will correctly identify this collapsible region.</p>
</details>

Custom Styling Example

Fully customize the appearance of <details> and <summary>:

<style>
  details {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.5em;
    margin-bottom: 1em;
  }
  summary {
    font-weight: bold;
    cursor: pointer;
    padding: 0.5em;
    background-color: #f8f9fa;
    border-radius: 3px;
  }
  summary:hover {
    background-color: #e9ecef;
  }
</style>

<details>
  <summary>Custom-styled summary</summary>
  <p>This collapsible region has a fully customized appearance.</p>
</details>

Practical Use Cases

1. FAQ Section:

<details>
  <summary>How to reset password?</summary>
  <ol>
    <li>Visit the login page</li>
    <li>Click the "Forgot password" link</li>
    <li>Follow the instructions in the email</li>
  </ol>
</details>

2. Collapsible Code Examples:

<details>
  <summary>View JavaScript example code</summary>
  <pre><code class="language-javascript">function helloWorld() {
  console.log("Hello, World!");
}</code></pre>
</details>

3. Collapsing Chapters in Long Articles:

<article>
  <h2>Long Article Title</h2>
  <details>
    <summary>Chapter 1</summary>
    <p>Chapter 1 content...</p>
  </details>
  <details>
    <summary>Chapter 2</summary>
    <p>Chapter 2 content...</p>
  </details>
</article>

Browser Compatibility

Most modern browsers support <details> and <summary>, including:

• Chrome 12+
• Firefox 49+
• Safari 6+
• Edge 79+
• Opera 15+

For older browsers that don’t support these tags, you can use the following polyfill:

<script>
  // Simple polyfill
  if (!('open' in document.createElement('details'))) {
    document.addEventListener('DOMContentLoaded', function() {
      var details = document.querySelectorAll('details');
      details.forEach(function(detail) {
        var summary = detail.querySelector('summary');
        summary.addEventListener('click', function() {
          detail.open = !detail.open;
        });
      });
    });
  }
</script>

Performance Considerations

Extensive use of <details> elements may impact page performance, especially on mobile devices. For collapsible regions with large content, consider these optimizations:

1. Lazy-load hidden content
2. Virtual scrolling for long lists
3. Avoid nesting complex layouts within collapsible regions

Combining with Other HTML Elements

<summary> can be used with most HTML elements, such as:

<details>
  <summary>
    <h3>Summary with heading</h3>
    <small>Subtitle</small>
  </summary>
  <div>
    <img src="example.jpg" alt="Example image">
    <p>Mixed content with text and images</p>
  </div>
</details>

Dynamic Content Loading

You can dynamically load content for collapsible regions using JavaScript:

<details>
  <summary>Click to load dynamic content</summary>
  <div id="dynamic-content"></div>
</details>

<script>
  document.querySelector('details').addEventListener('toggle', function() {
    if (this.open && !this.querySelector('#dynamic-content').innerHTML) {
      fetch('/api/content')
        .then(response => response.text())
        .then(html => {
          this.querySelector('#dynamic-content').innerHTML = html;
        });
    }
  });
</script>

Printing Behavior

By default, hidden content in <details> remains hidden when printed. You can force it to display with CSS:

@media print {
  details {
    display: block !important;
  }
  details > * {
    display: block !important;
  }
}