HTML Details & Summary
In this page:
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.
Warning: By default, details widgets are closed; you can use the open attribute to display them pre-expanded.
Example: Native Accordions with details
<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
<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.
Warning: Manually adding open attributes to every details widget defeats the purpose of keeping your layout compact.
Example: Pre-expanded Accordions with open
<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
<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.
Warning: Ensure each details widget operates independently to prevent layout conflicts.
Example: Grouping Multiple Accordions
<details>
<summary>Question 1</summary>
<p>Answer 1</p>
</details>
<details>
<summary>Question 2</summary>
<p>Answer 2</p>
</details>- Placing the summary tag below other tags inside the details container, which breaks accordion rendering.
- Omitting fallback text inside details containers, causing empty blocks when expanded.
- Attempting to style details heights with fixed CSS values, which can cut off your expanded content.
- 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.
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: