×

html · level 3 · unit 6 · lesson 1

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

<details> and <summary> make a that opens and closes.

A widget is a ready-made control people use, like a button. <details> is a widget built into HTML. The browser shows only its <summary>, with a small triangle. Click it and the rest appears. Click again and it hides.

<summary> must be the first thing inside <details>. Everything after it stays hidden until opened. Add the open attribute to start it open.

Give several <details> the same name and they become an : opening one closes the others. It all works with the keyboard and with screen readers, and needs no script.

<h2>Questions</h2>
<details name="faq" open>
  <summary>Do you deliver?</summary>
  <p>Yes, anywhere in Leeds, and free over £30.</p>
</details>
<details name="faq">
  <summary>Can I return a plant?</summary>
  <p>Within 14 days, if it is still alive.</p>
</details>

Press show my page to see it here.

open needs no value. Writing it at all is enough.