Disclosure widgets in HTML

Details and summary give you an accordion with no JavaScript at all.

<details open>
  <summary>How is speed measured?</summary>
  <p>Tokens per minute, taken from a real lexer.</p>
</details>
<details name="faq">
  <summary>Do I need an account?</summary>
  <p>No. Progress is kept in your browser until you sign in.</p>
</details>

How it works

1. summary is the always-visible label and the click target.
2. open starts the panel expanded.
3. A shared name makes several details behave as an accordion.

The run, in numbers

Lines

8

Characters to type

254

Tokens

50

Three-star pace

75 tpm

At the three-star pace of 75 tokens a minute, this run takes about 40 seconds.

Type this snippet

Step 1 of 4 in Disclosure & dialogs, step 1 of 13 in Interactive HTML.

Next →