Elementos interactivos

6.1 Etiqueta <details>

HTML5 añadió los elementos <details> y <summary>, que están pensados para crear bloques interactivos desplegables. Estos elementos permiten a los usuarios expandir y contraer contenido, mejorando la interacción y ahorrando espacio en la página web.

El elemento <details> se usa para crear un bloque que se puede expandir o contraer. Dentro de él, puedes colocar cualquier contenido HTML. Al expandir <details>, se muestra el contenido anidado, y al contraerlo, se oculta.

Sintaxis:

    
      <details>
        <summary>Título</summary>
        <!-- Contenido oculto -->
      </details>
    
  

Atributo open:

Si el atributo está presente, el bloque <details> se mostrará expandido por defecto.

Ejemplo de uso de <details>

    
      <details open>
        <summary>Información principal</summary>
        <p>Esta información es visible por defecto porque el atributo open está establecido.</p>
      </details>
    
  

Explicación

• <details>: crea un contenedor para el contenido oculto.
• <summary>: define el título que siempre es visible y que puede ser pulsado para expandir o contraer el contenido.

6.2 Etiqueta <summary>

El elemento <summary> se utiliza dentro de <details> para crear un título. Este título siempre es visible y actúa como control para expandir o contraer el contenido del bloque <details>.

Sintaxis:

    
      <details>
        <summary>Título</summary>
        <!-- Contenido oculto -->
      </details>
    
  

Ejemplo de uso:

    
      <details>
        <summary>Más información</summary>
        <p>Este es el contenido oculto que se hace visible al expandir el bloque.</p>
      </details>
    
  

Ventajas de usar <details> y <summary>

1. Mejora de la experiencia del usuario: los usuarios pueden controlar qué contenido quieren ver.
2. Ahorro de espacio: se puede ocultar gran cantidad de información bajo títulos interactivos.
3. Marcado semántico: se mejora la estructura del documento HTML y su accesibilidad para usuarios y motores de búsqueda.

6.3 Interacción con JavaScript

Los elementos <details> y <summary> se pueden controlar fácilmente con JavaScript para crear páginas web más interactivas.

Ejemplo de uso de JavaScript:

    
      <details>
        <summary>Más información</summary>
        <p>Este es el contenido oculto que se hace visible al expandir el bloque.</p>
      </details>
      <details open>
        <summary>Información principal</summary>
        <p>Esta información es visible por defecto porque el atributo open está establecido.</p>
      </details>
      <button id="toggleDetails">Contraer/expandir</button>
    
  

    
      // Encontramos el botón con id 'toggleDetails' y añadimos un manejador de eventos 'click'
      document.getElementById('toggleDetails').addEventListener('click', () => {
        // Encontramos todos los elementos 'details' en la página
        document.querySelectorAll('details').forEach(detail => {
          // Invertimos el valor de la propiedad 'open' de cada elemento 'details'
          detail.open = !detail.open; 
        });
      });
    
  

Explicación:

• Botón "Contraer/expandir": controla el estado de todos los elementos <details> en la página
• Evento click: alterna el atributo open para todos los elementos <details>