Elementos interactivos

Detalles <details>

La etiqueta <details> permite mantener oculta una parte de la página web, que el usuario puede hacer visible u ocultar de nuevo haciendo clic en un icono con forma de triángulo.

<p>En la película de 1968 ... </p>

<details>
  <summary>Spoiler</summary>
  <p>En la escena final, el protagonista encuentra ... </p>
</details>
ERROR (no puede mostrarse el objeto)
Enlace externo

El atributo <open> hace que el contenido de <details> se muestre cuando se carga la página, aunque se pueda ocultar posteriormente.

<p>Formulario de registro</p>

<details open="open">
  <summary>Datos personales</summary>
  <p>Nombre: <input type="text" name="nombre" /></p>
</details>

<details open="open">
  <summary>Datos profesionales</summary>
  <p>Empresa: <input type="text" name="empresa" /></p>
</details>
ERROR (no puede mostrarse el objeto)
Enlace externo

Resumen <summary>

El elemento <summary> se incluye dentro de un elemento <details> y contiene la parte del contenido que está siempre visible y sobre la que también se puede hacer clic para mostrar el resto del contenido, como muestran los ejemplos del apartado anterior.


Si no se incluye el elemento <summary>, los navegadores muestran el texto "Detalles".

<p>Berners-Lee creó el HTML basándose en SGML. La IETF publicó la norma RFC 1866 en 1995 y el W3C publicó la recomendación HTML 3.2 en 1997.</p>

<details>
  <ul>
    <li>HTML: HyperText Markup Language</li>
    <li>SGML: Standard Generalized Markup Language</li>
    <li>IETF: Internet Engineering Task Force</li>
    <li>W3C: World Wide Web Consortium</li>
  </ul>
</details>
ERROR (no puede mostrarse el objeto)
Enlace externo

El icono que muestra el elemento interactivo <summary> de <details> se puede establecer con las propiedades de lista, como se comenta la lección CSS Listas.