← Back to HTML Course | Chapter 8: Modern HTML & Components | Lesson 7 of 10

HTML Details & Summary

Imagine visiting an online FAQ page that lists thirty long, detailed answers. If the page displayed all thirty answers at the same time, the page would be massive, and you would have to scroll forever just to find your question. In the past, developers had to write complex CSS and JavaScript code just to build expand/collapse FAQ accordions. The HTML details and summary elements solve this. They create native, interactive expand/collapse widgets. By using simple tags, you can hide long explanations and let users toggle them open with a single click, keeping your page clean and organized.

In this page:

  1. Native Accordions with details
  2. Customizing the summary Heading
  3. Pre-expanded Accordions with open
  4. Customizing the Disclosure Triangle
  5. Grouping Multiple Accordions
Syntax
markup 
<details>
  <summary>Visible heading</summary>
  Hidden content
</details>

Native Accordions with details

The details tag defines an interactive expand/collapse accordion widget on your webpage. Any content placed inside this container (like paragraphs or images) stays hidden by default until the user clicks to expand it.

Note:
  • Use details tags to keep FAQs, technical specifications, or nested links organized and clean.
  • Accepted attributes:
  • open — boolean; expanded state
  • name — group name; only one open in the group (exclusive accordion)
  • summary — first child; visible label
Warning: By default, details widgets are closed; you can use the open attribute to display them pre-expanded.

Example: Native Accordions with details

markup 
<details>
  <summary>Click to expand</summary>
  <p>Hidden content revealed here.</p>
</details>

Customizing the summary Heading

The summary tag defines the visible, clickable heading of your details widget. Clicking this heading toggles the rest of the details content open or closed, and it displays with a small disclosure triangle next to it by default.

Note: Wrap your summary text inside heading tags (like h3) to maintain an organized heading outline for SEO.
Warning: The summary tag must be the very first child element inside your parent details tag.

Example: Customizing the summary Heading

markup 
<details>
  <summary><h3>FAQ Question</h3></summary>
  <p>Answer text</p>
</details>

Pre-expanded Accordions with open

You can force a details widget to display pre-expanded when the page loads by adding the open attribute to its opening tag. This is incredibly useful for highlighting primary notices or the first question in a list.

Note:
  • You can toggle the open attribute dynamically inside your scripts to control your accordions.
  • Accepted values:
  • open — boolean attribute (present or open="")
  • Toggle event fires when it changes
Warning: Manually adding open attributes to every details widget defeats the purpose of keeping your layout compact.

Example: Pre-expanded Accordions with open

markup 
<details open>
  <summary>Already expanded</summary>
  <p>Visible by default</p>
</details>

Customizing the Disclosure Triangle

By default, browsers render a small disclosure triangle next to your summary text. You can easily customize or remove this triangle using standard CSS properties.

Note: Remove the default triangle and replace it with custom '+' or '-' characters to match your design.
Warning: Older Safari browsers require a prefix selector (-webkit-details-marker) to hide the default triangle.

Example: Customizing the Disclosure Triangle

markup 
<style>
  summary {
    list-style: none;
  }
</style>
<details>
  <summary>Custom marker</summary>
  <p>Content</p>
</details>

Grouping Multiple Accordions

You can group multiple details widgets together to build clean, professional Accordion menus. You can even write simple scripts to close other widgets when a user expands a new one, creating a true Accordion menu flow.

Note:
  • Use details groups for compact settings menus or sidebar directories.
  • Accepted values:
  • name — same string on several details makes them mutually exclusive
  • open — boolean; preopened item
Warning: Ensure each details widget operates independently to prevent layout conflicts.

Example: Grouping Multiple Accordions

markup 
<details>
  <summary>Question 1</summary>
  <p>Answer 1</p>
</details>
<details>
  <summary>Question 2</summary>
  <p>Answer 2</p>
</details>
Live Example
Related Topics

HTML Dialog Element · HTML Picture Element · HTML Template Tag · HTML Data Attributes

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Placing the summary tag below other tags inside the details container, which breaks accordion rendering.
  2. Omitting fallback text inside details containers, causing empty blocks when expanded.
  3. Attempting to style details heights with fixed CSS values, which can cut off your expanded content.
Chapter Summary
  • The details tag defines an interactive, collapsible accordion container.
  • The summary tag serves as the clickable header that toggles the content open or closed.
  • Manage accordion states using the open attribute, and customize or remove the default disclosure triangle using CSS.
Browser Support

Standard details and summary elements are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson HTML Dialog Element Next Lesson → HTML Picture Element

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.