html
/

HTML Details & Summary: Expandable Content

Last Sync: Today

On this page

11
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

html

HTML Details & Summary: Expandable Content

What are Details & Summary?

The <details> and <summary> elements are used to create expandable and collapsible content sections without JavaScript.

Basic Syntax

HTMLRead-only
1
<details>
  <summary>Click to expand</summary>
  <p>This is hidden content.</p>
</details>

Open by Default

HTMLRead-only
1
<details open>
  <summary>Visible Section</summary>
  <p>This content is open by default.</p>
</details>

Multiple Sections (Accordion Style)

HTMLRead-only
1
<details>
  <summary>Section 1</summary>
  <p>Content 1</p>
</details>

<details>
  <summary>Section 2</summary>
  <p>Content 2</p>
</details>

Styling with CSS

CSSRead-only
1
details {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
}

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

Custom Marker (Arrow)

CSSRead-only
1
summary::marker {
  color: blue;
}

Use Cases

  • FAQs sections
  • Accordion UI
  • Expandable descriptions
  • Hide/show additional details

Accessibility Benefits

These elements are accessible by default and support keyboard navigation and screen readers.

Best Practices

  • Use meaningful summary text
  • Keep content concise inside details
  • Use for optional or expandable content
  • Enhance styling for better UX

Common Mistakes

  • Using empty summary tags
  • Overloading with too much content
  • Using for critical content that should always be visible
  • Ignoring styling for clarity

Conclusion

HTML details and summary elements provide a simple, accessible way to create collapsible content without JavaScript.

Try it yourself

<details>
  <summary>Click me</summary>
  <p>Hello World</p>
</details>

Test Your Knowledge

Q1
of 3

Which tag creates collapsible content?

A
<collapse>
B
<details>
C
<section>
D
<toggle>
Q2
of 3

Which tag is clickable title?

A
<title>
B
<summary>
C
<header>
D
<label>
Q3
of 3

Does it require JavaScript?

A
Yes
B
No
C
Sometimes
D
Only CSS

Frequently Asked Questions

What does details tag do?

It creates expandable content sections.

What is summary tag?

It defines the clickable heading for the details section.

Does it need JavaScript?

No, it works natively in HTML.

Previous

html progress meter

Next

html dialog

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.