Structure and accessibility · Lesson 15 of 16

Disclosure with details

Native interaction without JavaScript.

8 minutes2 games

details provides a native disclosure and summary is its clickable label. Use it for FAQs or supplementary details; essential information should remain discoverable without opening many panels.

HTML

<details>
  <summary>Do I need experience?</summary>
  <p>No. Start with the first lesson.</p>
</details>
<details open>
  <summary>How do exercises work?</summary>
  <p>Edit the example and run it.</p>
</details>

summary

Keyboard or pointer activation

Show or hide content

Complete the code

Complete the disclosure label.

<details>
  <>Read more</>
  <p>Extra information</p>
</details>

Exercise

Create an open details containing summary and p.

HTML

Learn more from

Played 0 of 2 games

HTML

Structure and accessibility · Lesson 15 of 16

Disclosure with details

Native interaction without JavaScript.

8 minutes2 games

details provides a native disclosure and summary is its clickable label. Use it for FAQs or supplementary details; essential information should remain discoverable without opening many panels.

HTML

<details>
  <summary>Do I need experience?</summary>
  <p>No. Start with the first lesson.</p>
</details>
<details open>
  <summary>How do exercises work?</summary>
  <p>Edit the example and run it.</p>
</details>

summary

Keyboard or pointer activation

Show or hide content

Complete the code

Complete the disclosure label.

<details>
  <>Read more</>
  <p>Extra information</p>
</details>

Exercise

Create an open details containing summary and p.

HTML

Learn more from

Played 0 of 2 games