Details & Summary

Have you ever seen a FAQ section where you click a question and the answer expands underneath? That is exactly what the <details> and <summary> elements do. They let you create collapsible content with zero JavaScript. The browser handles all the toggling for you.

Basic Details and Summary

Wrap your content in a <details> tag and put a <summary> as the first child. The summary becomes the clickable label, and everything else inside details is hidden until the user clicks to expand it.

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

Open by Default

Want the content to be visible when the page loads? Just add the open attribute to the details tag. The user can still click the summary to collapse it.

<details open>
  <summary>Course Overview</summary>
  <p>This course covers the fundamentals of web development, from HTML basics to advanced topics.</p>
</details>
    

Multiple Sections Inside

A details element can contain any HTML content — paragraphs, lists, images, even other details elements. This makes it perfect for nested FAQ sections or complex collapsible content.

<details>
  <summary>Course Modules</summary>
  <ul>
    <li>Module 1: HTML Basics</li>
    <li>Module 2: CSS Fundamentals</li>
    <li>Module 3: JavaScript Essentials</li>
  </ul>
</details>
    

Styling the Summary

You can style the summary element with CSS to match your design. The browser shows a small triangle or arrow by default, but you can customize that with list-style or use your own marker with ::marker pseudo-element.

<style>
  summary {
    cursor: pointer;
    font-weight: bold;
    padding: 8px;
    background: #f0f0f0;
  }
  details[open] summary {
    background: #e0e0e0;
  }
</style>

<details>
  <summary>Click to Expand</summary>
  <p>This content is now visible!</p>
</details>