Apprends à créer des widgets de divulgation natifs avec les éléments details et summary — du contenu pliable sans aucun JavaScript.
L'élément <details> crée un widget de divulgation — un morceau de contenu que l'utilisateur peut afficher ou masquer en cliquant. L'élément <summary> fournit le libellé visible.
<details>
<summary>Click to expand</summary>
<p>This content is hidden until the user clicks the summary.</p>
</details>Par défaut, le contenu est replié. Quand l'utilisateur clique sur le summary, le navigateur bascule l'attribut open sur l'élément <details>.
Aucun JavaScript requis — c'est un comportement HTML entièrement natif.
Ajoute l'attribut open pour afficher le contenu par défaut :
<details open>
<summary>Already expanded</summary>
<p>This content is visible on page load.</p>
</details>Tu peux écouter l'événement toggle en JavaScript pour réagir quand l'utilisateur ouvre ou ferme le widget :
details.addEventListener('toggle', () => {
console.log(details.open ? 'Opened' : 'Closed');
});<summary>Si tu omets <summary>, le navigateur génère un libellé par défaut (généralement "Details"). Fournis toujours un summary significatif.
<section>
<h2>FAQ</h2>
<details>
<summary>How do I create an account?</summary>
<p>Click the Sign Up button in the top right corner.</p>
</details>
<details>
<summary>Can I change my username?</summary>
<p>Yes, go to Settings > Profile > Username.</p>
</details>
</section>Tu peux imbriquer des éléments <details> pour une divulgation à plusieurs niveaux :
<details>
<summary>Advanced settings</summary>
<details>
<summary>Network</summary>
<p>Configure proxy and DNS settings here.</p>
</details>
<details>
<summary>Privacy</summary>
<p>Manage cookies and tracking preferences.</p>
</details>
</details><summary> est focusable et activable au clavier (Entrée/Espace).<h2>Frequently Asked Questions</h2>
<details>
<summary>What is HTML?</summary>
<p>HTML (HyperText Markup Language) is the standard language
for creating and structuring web page content.</p>
</details>
<details>
<summary>Do I need to know CSS to learn HTML?</summary>
<p>No. HTML handles structure, CSS handles presentation.
You can learn HTML first and add CSS later.</p>
</details>
<details open>
<summary>Is this content expanded by default?</summary>
<p>Yes! The <code>open</code> attribute makes this
details element start in the expanded state.</p>
</details>Que se passe-t-il quand tu ajoutes l'attribut `open` à un élément <details> ?