details & summary

Reveal more with native HTML

Lesson 13 of 20 · 10 min · Module 5: Interfaces people can operate

Some interactions are already built into HTML. A details element provides a disclosure that people can expand using a pointer or keyboard.

Start this lesson →

Free. No installation: you write and run the code in your browser, and it is checked automatically.

By the end, you’ll be able to…

Use native disclosure behavior
Give each disclosure a clear label

The idea

Place a summary first inside details, followed by the content it reveals. The summary labels the disclosure. The optional open attribute expands it initially.

<details>
  <summary>What will I learn?</summary>
  <p>How to build a clear, useful page.</p>
</details>

01Start with the content relationship

The summary is the short label; the remaining content is its explanation. Keep related content together inside the same details element.

02Let the browser own the interaction

Native disclosure behavior already responds to keyboard input. You do not need a click handler just to reveal the answer.

03Choose an initial state

The open attribute is boolean: its presence expands the disclosure. Writing open="false" still includes the attribute and therefore opens it.

Your turn

Inside section.faq, create exactly two details elements. Their summaries must be Do I need experience? and Can I learn at my own pace?, in that order. Put a nonempty paragraph in each. Keep the first disclosure initially open.

What the checks look for

Exactly two disclosures exist
Summaries ask the two required questions
Each disclosure contains an answer
The first disclosure starts expanded

Try it in the editor →

Take this with you

Use a native element when its behavior matches the interaction you need.

Go a little further

Style the summary’s focus indicator while keeping its native keyboard behavior.