Using <details> and <summary> for Native Collapsible Content

The <details> and <summary> elements are simple yet powerful HTML5 features that allow you to create collapsible content sections without relying on JavaScript. These elements improve accessibility and provide a clean user experience out of the box.

What Are <details> and <summary>?

• <details> is a container for content that can be expanded or collapsed by the user.
• <summary> defines a visible label or heading for the collapsible section. Clicking this toggles the visibility of the content inside <details>.

This functionality works natively in all modern browsers and can be styled with CSS.

Basic Example

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

When the user clicks “What is HTML?”, the paragraph becomes visible. Clicking again hides it.

Customizing the Appearance

Although <details> has a default arrow indicator and styling, you can override these with CSS:

cssCopy
details summary {
  font-weight: bold;
  cursor: pointer;
}

details[open] summary {
  color: teal;
}

You can also hide the default marker and use your own:

cssCopy
summary::-webkit-details-marker {
  display: none;
}

Then use a background image or icon to indicate the open/closed state.

Accessibility

These elements are accessible by default:

• Keyboard users can navigate and toggle them using Tab and Enter.
• Screen readers announce the expanded/collapsed state.

Still, make sure the content inside is structured properly with headings and semantic HTML for clarity.

Use Cases

• FAQs (Frequently Asked Questions)
• Technical documentation
• Advanced settings sections
• Hiding optional or additional info

Limitations

• Animations must be added manually with JavaScript or CSS transitions (only for inner content, not the element itself).
• Not all legacy browsers support them (e.g., IE11).

---

Summary

<details> and <summary> offer a semantic and accessible way to create collapsible content without any JavaScript. They're perfect for simple interactions like FAQs or expandable instructions, and they enhance both usability and performance in modern web apps.