0Pricing
HTML Academy · Lezione

details e summary: widget di divulgazione

Creare componenti nativi per espandere e comprimere contenuti senza JavaScript

details e summary: widget di divulgazione è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

Che cosa sono details e summary?

Gli elementi <details> e <summary> creano un widget nativo di tipo disclosure, cioè un componente espandibile/comprimibile, senza alcun JavaScript:

<details>
  <summary>What is HTML?</summary>
  <p>HTML (HyperText Markup Language) is the standard markup language
     used to create web pages.</p>
</details>

Come funziona

Comportamento interattivo:

  • Per impostazione predefinita, è visibile solo <summary>
  • Facendo clic su summary si alterna la visibilità del contenuto restante
  • Per impostazione predefinita, su summary compare un triangolo di espansione
  • Non è richiesto JavaScript

L'attributo open

L'attributo open espande in anticipo l'elemento details:

<details open>
  <summary>Installation instructions</summary>
  <ol>
    <li>Download the installer</li>
    <li>Run the installer</li>
    <li>Restart your computer</li>
  </ol>
</details>
<!-- open is a boolean attribute: presence = expanded -->
<!-- Remove it to start collapsed -->

Creare una FAQ

Le sezioni FAQ sono un caso d'uso perfetto:

<h2>Frequently Asked Questions</h2>

<details>
  <summary>Is HTML5 a programming language?</summary>
  <p>No. HTML5 is a markup language that defines the structure and meaning
     of web content. Programming languages like JavaScript add logic and behavior.</p>
</details>

<details>
  <summary>Do I need to close void elements?</summary>
  <p>In HTML5, void elements like &lt;img&gt; and &lt;br&gt; do not require
     a closing slash. Both &lt;br&gt; and &lt;br /&gt; are valid.</p>
</details>

Stilizzare details e summary

Personalizzi l'aspetto:

details {
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
}

summary {
  font-weight: 600;
  cursor: pointer;
  list-style: none;   /* remove default triangle */
}

summary::before {
  content: '▶ ';      /* custom arrow */
}

details[open] > summary::before {
  content: '▼ ';      /* rotate when open */
}

Rimuovere il triangolo predefinito

Il triangolo di espansione viene applicato con list-style:

/* Remove the default arrow: */
summary {
  list-style: none;
}

/* Firefox: */
summary::-webkit-details-marker {
  display: none;
}

/* Then add a custom indicator: */
summary::after {
  content: '+';
  float: right;
}
details[open] summary::after {
  content: '−';
}

L'evento toggle

Ascolti l'apertura e la chiusura con l'evento toggle:

const details = document.querySelector('details');

details.addEventListener('toggle', () => {
  if (details.open) {
    console.log('Details opened');
    // Track analytics, load content, etc.
  } else {
    console.log('Details closed');
  }
});

Accordion con details

Costruisca un accordion di base, con un solo pannello aperto alla volta:

/* Pure CSS accordion using details: */
/* Each item is a details element */
/* For exclusive open, use JavaScript: */

const allDetails = document.querySelectorAll('details');
allDetails.forEach(d => {
  d.addEventListener('toggle', () => {
    if (d.open) {
      allDetails.forEach(other => {
        if (other !== d) other.removeAttribute('open');
      });
    }
  });
});

Accessibilità di details/summary

Funzionalità di accessibilità integrate:

  • summary riceve il focus da tastiera e può essere attivato con Invio o la barra spaziatrice
  • Gli screen reader annunciano il testo di summary e lo stato di espansione
  • Il contenuto nascosto è presente nel DOM, ma viene annunciato come nascosto finché non viene espanso

Attributo name per accordion esclusivi

HTML 2025 aggiunge name a details per creare un accordion esclusivo nativo:

<details name="faq">
  <summary>Question 1</summary>
  <p>Answer 1...</p>
</details>

<details name="faq">
  <summary>Question 2</summary>
  <p>Answer 2...</p>
</details>
<!-- details with the same name act as a group -->
<!-- Opening one closes the others automatically -->
<!-- Supported in Chrome 120+ and Firefox 130+ -->

Caricamento differito del contenuto con toggle

Carichi il contenuto solo quando details viene aperto:

<details id="advanced">
  <summary>Load advanced settings...</summary>
  <div id="advanced-content">Loading...</div>
</details>

<script>
const d = document.getElementById('advanced');
d.addEventListener('toggle', async () => {
  if (d.open) {
    const res = await fetch('/api/settings');
    const html = await res.text();
    document.getElementById('advanced-content').innerHTML = html;
    d.removeEventListener('toggle', arguments.callee);
  }
}, { once: true });
</script>

Verifica rapida

Quale elemento fornisce il testo del trigger sempre visibile in un widget disclosure details?

Riepilogo: dettagli e sintesi

Elementi essenziali dei widget di disclosure:

  • <details> + <summary> — espansione/compressione nativa, senza bisogno di JavaScript
  • attributo open — espande inizialmente
  • evento toggle — reagisce all'apertura/chiusura
  • Applichi lo stile con CSS; rimuova il triangolo predefinito con list-style: none
  • attributo name — accordion esclusivo (Chrome 120+)

Domande Frequenti

La lezione «details e summary: widget di divulgazione» è gratuita?

Sì — il testo completo di «details e summary: widget di divulgazione» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «details e summary: widget di divulgazione»?

Creare componenti nativi per espandere e comprimere contenuti senza JavaScript Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «details e summary: widget di divulgazione»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. aside: contenuto complementare
  2. figure e figcaption: approfondimento
  3. details e summary: widget di divulgazione
  4. Gli elementi progress e meter
← Torna a HTML Academy