Paneles desplegables en HTML

Details y summary te dan un acordeón sin nada de JavaScript.

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

Cómo funciona

1. summary es la etiqueta siempre visible y el blanco del clic.
2. open hace que el panel empiece expandido.
3. Un name compartido hace que varios details actúen como acordeón.

El intento, en números

Líneas

8

Caracteres a escribir

254

Tokens

50

Ritmo de tres estrellas

75 tpm

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

Escribe este fragmento

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

Siguiente →