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>
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>
  <summary>Datos personales</summary>
  <p>Nombre: <input type="text" name="nombre"></p>
</details>

<details open>
  <summary>Datos profesionales</summary>
  <p>Empresa: <input type="text" name="empresa"></p>
</details>
Enlace externo

El atributo name permite relacionar varios elementos details entre sí. Si varios elementos tienen el mismo valor del atributo name, al desplegar uno de ellos, el resto se pliegan. Eso permite utilizarlos por ejemplo para crear menús o páginas de preguntas y repuestas (FAQ).

<p>La etiqueta <details>:</p>

<details name="faq">
  <summary>¿Para qué sirve <details>?</summary>
  <p>Para crear un elemento desplegable</p>
</details>

<details name="faq">
  <summary>¿Para qué sirve el atributo open?</summary>
  <p>Para mostrar abierto inicialmente el elemento <details>.</p>
</details>

<details name="faq">
  <summary>¿Para qué sirve el atributo name?</summary>
  <p>Para que al abrir un elemento <details>, se cierren los demás.</p>
</details>
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 el 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>
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.

Ventana de diálogo <dialog>

La etiqueta <dialog> permite definir el contenido de una ventana de diálogo modal (independiente de la página web). Para mostrar la ventana, se debe establecer el atributo open.

<dialog id="dialog-1">
  <h1>Ventana de diálogo</h1>

  <p>Esto es un ejemplo de ventana de diálogo</p>

  <p>
    <input type="button" value="Cerrar"
           onclick="document.getElementById('dialog-1').removeAttribute('open')">
  </p>
</dialog>

<p>
  <input type="button" value="Muestra diálogo"
         onclick="document.getElementById('dialog-1').setAttribute('open', 'open')">
</p>
Enlace externo