An accordion without JavaScript in HTML

Give several disclosures the same name and the browser closes the others for you.

<h2>Frequently asked</h2>

<details name="faq" open>
  <summary>Is my progress saved?</summary>
  <p>Locally always, and to your account when you sign in.</p>
</details>

<details name="faq">
  <summary>Can I practice one language only?</summary>
  <p>Pick it from the language menu and it stays picked.</p>
</details>

<details name="faq">
  <summary>Does it work offline?</summary>
  <p>Not yet.</p>
</details>

How it works

1. name on <details> makes a group where only one can be open.
2. open sets which one starts expanded.
3. The <summary> is the button, and it is keyboard operable already.

The run, in numbers

Lines

16

Characters to type

400

Tokens

87

Three-star pace

75 tpm

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

Type this snippet

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

← Previous Next →