Semantic & Interactive

<details> & <summary>

Native disclosure widget — no JavaScript needed.

1Click to Expand

<details> creates an expandable widget. <summary> is the always-visible label. Add the open attribute to start expanded.

Example Code

css

<details>
  <summary>Read more</summary>
  <p>Hidden content revealed when the user clicks.</p>
</details>

<details open>
  <summary>FAQ: Is this free?</summary>
  <p>Yes — every Instant CSS tool is free to use.</p>
</details>

2Put the element in context

Details provides a native disclosure with summary as its visible trigger. It is useful for optional explanations and can work without custom scripting. Essential task instructions should not be hidden merely to make the page appear shorter.

3Practice with a small page

Create a common question with a concise summary and a detailed answer. Open and close it with keyboard input, then check the focus indicator. Add another question and decide whether visitors should be able to keep both answers open while comparing them.

Finished reading?

Mark this topic as complete to track progress.

<aside> Tag

Next Topic

<dialog> Modal