Details and Summary

Collapsible content, accordions, and disclosure widgets.

Overview

<details> and <summary> create interactive disclosure widgets.

Key Concepts

• Details — Collapsible container
• Summary — Always visible summary
• Open Attribute — Start expanded
• Accessibility — Built-in keyboard support
• Styling — Custom markers and animations

Code Examples

<!-- Basic details -->
<details>
  <summary>Click to expand</summary>
  <p>This content is hidden by default.</p>
</details>

<!-- Open by default -->
<details open>
  <summary>Always visible</summary>
  <p>This starts expanded.</p>
</details>

<!-- Accordion -->
<details name="faq">
  <summary>What is HTML?</summary>
  <p>HTML (HyperText Markup Language) is the standard markup language for web pages.</p>
</details>

<details name="faq">
  <summary>What is CSS?</summary>
  <p>CSS (Cascading Style Sheets) is used for styling web pages.</p>
</details>

<details name="faq">
  <summary>What is JavaScript?</summary>
  <p>JavaScript is a programming language for the web.</p>
</details>

<style>
details {
  border: 1px solid #ddd;
  margin-bottom: 8px;
  border-radius: 4px;
}

summary {
  padding: 12px;
  cursor: pointer;
  background: #f5f5f5;
  font-weight: bold;
}

summary:hover {
  background: #e9e9e9;
}

details[open] summary {
  border-bottom: 1px solid #ddd;
}

details > div,
details > p {
  padding: 12px;
}

/* Custom marker */
summary::marker {
  content: '▶ ';
}

details[open] > summary::marker {
  content: '▼ ';
}
</style>

<script>
// Track accordion state
document.querySelectorAll('details[name="faq"]').forEach(detail => {
  detail.addEventListener('toggle', () => {
    if (detail.open) {
      console.log('Opened:', detail.querySelector('summary').textContent);
    }
  });
});
</script>

Practice

Build an FAQ accordion with smooth animations.