typestar

Un acordeón sin JavaScript en HTML

Dale el mismo name a varios paneles y el navegador cierra los demás por ti.

<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>

Cómo funciona

  1. name en <details> crea un grupo donde solo uno puede estar abierto.
  2. open fija cuál empieza expandido.
  3. El <summary> es el botón, y ya se opera con teclado.

El intento, en números

Líneas
16
Caracteres a escribir
400
Tokens
87
Ritmo de tres estrellas
75 tpm

Al ritmo de tres estrellas de 75 tokens por minuto, este intento toma unos 70 segundos.

Escribe este fragmento

Paso 2 de 4 en Desplegables y diálogos; paso 2 de 13 en HTML interactivo.

← Anterior Siguiente →