Elementi interattivi

6.1 Tag <details>

HTML5 ha introdotto gli elementi <details> e <summary>, che sono progettati per creare blocchi a discesa interattivi. Questi elementi permettono agli utenti di espandere e comprimere il contenuto, migliorando l'interazione con l'utente e risparmiando spazio sulla pagina web.

L'elemento <details> viene utilizzato per creare un blocco che può essere espanso o compresso. All'interno di esso, puoi inserire qualsiasi contenuto HTML. Quando si espande <details> viene visualizzato il contenuto incorporato, mentre quando è compresso — è nascosto.

Sintassi:

    
      <details>
        <summary>Titolo</summary>
        <!-- Contenuto nascosto -->
      </details>
    
  

Attributo open:

Se l'attributo è presente, il blocco <details> sarà espanso di default.

Esempio di utilizzo di <details>

    
      <details open>
        <summary>Informazioni principali</summary>
        <p>Queste informazioni sono visibili di default, poiché l'attributo open è impostato.</p>
      </details>
    
  

Spiegazione

• <details>: crea un contenitore per il contenuto nascosto.
• <summary>: definisce il titolo, che è sempre visibile e su cui si può cliccare per espandere o comprimere il contenuto.

6.2 Tag <summary>

L'elemento <summary> è usato all'interno di <details> per creare un titolo. Questo titolo è sempre visibile e serve come elemento di controllo per l'espansione o la compressione del contenuto del blocco <details>.

Sintassi:

    
      <details>
        <summary>Titolo</summary>
        <!-- Contenuto nascosto -->
      </details>
    
  

Esempio di utilizzo:

    
      <details>
        <summary>Di più</summary>
        <p>Questo è il contenuto nascosto che diventa visibile quando il blocco viene espanso.</p>
      </details>
    
  

Vantaggi dell'uso di <details> e <summary>

1. Miglioramento dell'esperienza utente: gli utenti possono controllare autonomamente quale contenuto vogliono vedere.
2. Risparmio di spazio: nascondere una grande quantità di informazioni dietro titoli interattivi.
3. Markup semantico: migliorare la struttura del documento HTML e aumentare la sua accessibilità per gli utenti e i motori di ricerca.

6.3 Interazione con JavaScript

Gli elementi <details> e <summary> possono essere facilmente controllati usando JavaScript per creare pagine web più interattive.

Esempio di utilizzo con JavaScript:

    
      <details>
        <summary>Di più</summary>
        <p>Questo è il contenuto nascosto che diventa visibile quando il blocco viene espanso.</p>
      </details>
      <details open>
        <summary>Informazioni principali</summary>
        <p>Queste informazioni sono visibili di default, poiché l'attributo open è impostato.</p>
      </details>
      <button id="toggleDetails">Comprimi/espandi</button>
    
  

    
      // Trova il bottone con l'id 'toggleDetails' e aggiungi un handler per l'evento 'click'
      document.getElementById('toggleDetails').addEventListener('click', () => {
        // Trova tutti gli elementi 'details' sulla pagina
        document.querySelectorAll('details').forEach(detail => {
          // Inverte il valore della proprietà 'open' di ogni elemento 'details'
          detail.open = !detail.open; 
        });
      });
    
  

Spiegazione:

• Bottone "Comprimi/espandi": controlla lo stato di tutti gli elementi <details> sulla pagina
• Evento click: alterna l'attributo open per tutti gli elementi <details>