HTML <details> and <summary> for Expandable Content

The HTML <details> element creates a native disclosure widget that users can open and close. Put a <summary> first inside it to provide the visible label. For basic expandable content, no JavaScript is required.

This pattern is useful for optional explanations, troubleshooting steps, FAQs, technical notes, and other secondary content that should remain available without taking up space by default.

Basic <details> and <summary> example Top ↑

<details>
  <summary>More information</summary>
  <p>This content appears when the section is opened.</p>
</details>

Click or keyboard-activate the summary to toggle the section. Keep the summary short and descriptive so users know what will be revealed.

How <details> and <summary> work Top ↑

• <details> contains the disclosure label and the content that can be shown or hidden.
• <summary> should be the first child of <details> and acts as the visible control.
• When open is absent, only the summary is normally visible.
• When open is present, the additional content is shown.

Open a details section by default Top ↑

Add the Boolean open attribute when the disclosure should start expanded.

<details open>
  <summary>Shipping information</summary>
  <p>Orders are dispatched after processing.</p>
</details>

Because open is Boolean, writing open="false" still makes the section open. Remove the attribute completely when it should start closed.

Using multiple expandable sections Top ↑

Each <details> element works independently by default, so users can keep several sections open at the same time.

<details>
  <summary>HTML</summary>
  <p>HTML provides the structure of a web page.</p>
</details>

<details>
  <summary>CSS</summary>
  <p>CSS controls presentation and layout.</p>
</details>

Native accordion with the name attribute Top ↑

Give several <details> elements the same name value when you want only one section in that group to remain open at a time. This creates a simple accordion without JavaScript.

<details name="course">
  <summary>HTML</summary>
  <p>Learn page structure and semantic elements.</p>
</details>

<details name="course">
  <summary>JavaScript</summary>
  <p>Learn browser-side scripting and events.</p>
</details>

The basic disclosure behavior has broad browser support. The grouped name behavior is newer, so test it if your project must support older browser versions.

Styling details and summary with CSS Top ↑

You can style the container, summary label, and open state with CSS while keeping the native interaction.

details {
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 0.75rem;
}

summary {
  font-weight: 600;
  cursor: pointer;
}

details[open] summary {
  margin-bottom: 0.5rem;
}

Avoid removing the disclosure marker unless you provide an equally clear visual indication that the summary can be expanded and collapsed.

Detecting open and close changes with JavaScript Top ↑

JavaScript is not required for normal disclosure behavior. Add it only when your application needs to react to state changes. A toggle event is fired after a <details> element opens or closes.

const details = document.querySelector('#help');

details.addEventListener('toggle', () => {
  console.log(details.open ? 'Open' : 'Closed');
});

For more event-handling concepts, see the JavaScript events tutorial.

Accessibility guidance Top ↑

• Use a meaningful <summary> label instead of vague text such as “Click here”.
• Keep important task-critical information visible when hiding it would make the page harder to understand or use.
• Do not replace the native summary interaction with a non-semantic <div> or clickable text.
• Test custom marker styling and complex summary content with keyboard navigation and assistive technology.
• Avoid adding unnecessary ARIA roles to native <details> and <summary>; their built-in semantics should normally be preserved.

Good uses for <details> Top ↑

• Optional explanations and examples
• Troubleshooting steps
• Technical specifications
• Frequently asked questions
• Progressive disclosure of secondary content

Do not use disclosure widgets simply to hide large amounts of weak or repetitive content. The decision should improve usability for the reader.

Details, hidden content, and SEO Top ↑

Use <details> because it improves the user's experience, not as an SEO technique. Important introductory answers should still be easy to find, while secondary explanations can be placed in expandable sections when that organization genuinely helps readers.

The visible heading, summary text, surrounding context, and quality of the concealed content should all remain descriptive and useful. Do not put the entire purpose of a page behind a disclosure control.

Common mistakes Top ↑

• Omitting a useful <summary> label.
• Using open="false" and expecting the section to be closed.
• Using details for essential content that users must see immediately.
• Adding JavaScript for basic open/close behavior that HTML already provides.
• Removing visual disclosure cues without replacing them clearly.
• Using an accordion when independent expandable sections would be easier to browse.

Frequently asked questions Top ↑

Does <details> require JavaScript? Top ↑

No. Browsers provide the standard open-and-close interaction natively. JavaScript is only needed for extra behavior.

What does the <summary> element do? Top ↑

It provides the visible label or caption that users activate to open or close the parent <details> element.

How do I keep a details section open by default? Top ↑

Add the Boolean open attribute to the <details> start tag.

Can I create an accordion without JavaScript? Top ↑

Yes. In current browsers, multiple <details> elements with the same name value can form a group where opening one closes the previously open item.

Can I style <details> and <summary> with CSS? Top ↑

Yes. You can style the container, summary, open state, and disclosure marker, but preserve a clear interactive cue and keyboard usability.

Related HTML tutorials Top ↑

HTML5 tags | HTML dialog element | Types of HTML tags

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: